CSS 属性 white-space break-spaces 示例

Question

我正在寻找 css white-space: break-spaces 示例。我用谷歌搜索了 1 小时。还没有找到例子！大多数教程显示 normal、nowrap、pre、pre-wrap、pre-line 的示例。对于 break-spaces 人们显示如下来自 mozilla

的引述

The behavior is identical to that of pre-wrap, except that:

Any sequence of preserved white space always takes up space, including at the end of the line.

A line breaking opportunity exists after every preserved white space character, including between white space characters.

Such preserved spaces take up space and do not hang, and thus affect the box’s intrinsic sizes (min-content size and max-content size).

任何人都可以举例说明 break-spaces 和 pre-wrap 之间的区别吗？

Answer 1

这个例子应该更清楚地显示尾随的白色 space 不会用 pre-wrap

换行

.break-spaces {
  white-space: break-spaces;
}

.pre-wrap {
  white-space: pre-wrap;
}

div {
  background: #f3f3f3;
  width: 150px;
}

span {
  background: #ccc;
}

<div class="break-spaces">
  <span>This is a test where white-space: break-spaces is being used.
  Trailing white space will wrap                                                        
  
  Test</span>
</div>

<div class="pre-wrap">
  <span>This is a test where white-space: pre-wrap is being used.
  Trailing white space will not wrap                                                    
  
  Test</span>
</div>

CSS 属性 white-space break-spaces 示例

CSS Property white-space example for break-spaces

css

whitespace