css中white-space 属性：“pre”, “pre-line”, “pre-wrap” “nowrap”的区别

左手的ㄟ右手 2022-08-31 01:54 280阅读 0赞

在css中white-space属性用来控制容器的文本中带有空白符、制表符、换行符等的显示，取值有：

* normal：默认，忽略文本中所有的空白、换行符；只有文本存在 或文本达到框的约束时，文本才会换行
 * nowrap：和normal类似，忽略文本中所有的空白、换行符；遇到框的宽度约束时不会自动换行，文本只有在有 br 时才会换行
 * pre：保留文本中的空白、换行符；遇到框的宽度约束时不会自动换行，文本存在 或文本中有换行符时，文本才会换行
 * pre-wrap：和pre类似，保留文本中的空白、换行符；文本存在 或文本中有换行符时，或者遇到框的宽度约束时，文本都才会换行
 * pre-line：会略文本中的空白符；文本存在 或文本中有换行符时，或者遇到框的宽度约束时，文本都才会换行

示例：

.container {
      background-color: lightgreen;
      width: 300px;
    }
    .normal {
      white-space: normal;
    }
    .no-wrap {
      white-space: nowrap;
    }
    .pre {
      white-space: pre;
    }
    .pre-line {
      white-space: pre-line;
    }
    .pre-wrap {
      white-space: pre-wrap;
    }

html模板：

<div class="container">
 
 Lorem ipsum dolor sit amet consectetur adipisicing elit.
 Unde velit ullam iste labore earum.
 Nam ea exercitationem aspernatur ipsum
 </div>

**1、white-space: normal**

`white-spaces: normal` is the default value. All the source line break, extra white space/tab is collapsed. The text will only break into new line when there is ` ` or if the text hit the constraint of the box.

![99a1efcaac69239f006abe536684a0a3.png][]

效果：

![e27045ac4c8ce060d522fe3580905fff.png][]

**2、white-space: nowrap**

All the extra spacing/line break is collapsed.  
Do not automatically break into new line when hit the width constraint of the box. Text will only break into new line when it has `br`

![1c73f8678e869078187eae5f41958154.png][]

效果

![d025deea0e19d74127554fcac14e4988.png][]

**3、white-space: pre**

Sequences of white space are preserved. Lines are only broken at newline characters in the source and at ` ` elements.

The text do not break into new line even when it hit the width constraint of the box. It will only break into new line if the source has new line or when it has ` `

![ad5de912da6d6ab4cc3034b7ad332aa5.png][]

效果

![527f70aa802ceeec611279904d9f89c8.png][]

** 4、white-space: pre-wrap**

Sequences of white space are preserved. Lines are broken at newline characters, at ` `, and as necessary to fill line boxes.

`pre-wrap` is very similar to `pre` The only differences is the text will automatically break into a new line when it hit the width constraint of the box.

![123fb52f0e9b68d2134c97472c77105e.png][]

效果

![e1614ab9184ef0d1fb09eca38e7f97b3.png][]

**5、white-space: pre-line**

Sequences of white space are collapsed. Lines are broken at newline characters, at ` `, and as necessary to fill line boxes.

Source line break is preserved `line break 1 – 6 `xtra spacing is collapsed into single spacing. Text will automatically break into new line when hit the width constraint of the box , it has` ` and the source has new line.

![0ab2ec4d78c7eaace82f86aacf4e303f.png][]

效果

![bf54f8de2797f4c3ba64ecdc8354c769.png][]

[https://medium.com/@tohbansoon/differences-between-pre-pre-line-pre-wrap-and-no-wrap-in-css-1fe4b0f72699][https_medium.com_tohbansoon_differences-between-pre-pre-line-pre-wrap-and-no-wrap-in-css-1fe4b0f72699]

[99a1efcaac69239f006abe536684a0a3.png]: /images/20220829/498439830f6148ee9c214f4e78f1ee61.png
[e27045ac4c8ce060d522fe3580905fff.png]: /images/20220829/7672f41f9ab94f38b4dc12b17e4790de.png
[1c73f8678e869078187eae5f41958154.png]: /images/20220829/10199bcc2fa74b3eaf024b2915a55dac.png
[d025deea0e19d74127554fcac14e4988.png]: /images/20220829/4e63e9da38ba4d0d91e24852505dba96.png
[ad5de912da6d6ab4cc3034b7ad332aa5.png]: /images/20220829/797c163406124b23851a1400651135bc.png
[527f70aa802ceeec611279904d9f89c8.png]: /images/20220829/ba4ed9816d2a44a287a24dcdc7af89c7.png
[123fb52f0e9b68d2134c97472c77105e.png]: /images/20220829/e420d7cc7e26410db7e0018aadf8c9ff.png
[e1614ab9184ef0d1fb09eca38e7f97b3.png]: /images/20220829/cd2ff27a7e0647ab99eee32f331feb37.png
[0ab2ec4d78c7eaace82f86aacf4e303f.png]: /images/20220829/53d7b03a09e54983aaebc99e15ed51dc.png
[bf54f8de2797f4c3ba64ecdc8354c769.png]: /images/20220829/6da4c0e4368a402687461f6c8c8c666f.png
[https_medium.com_tohbansoon_differences-between-pre-pre-line-pre-wrap-and-no-wrap-in-css-1fe4b0f72699]: https://medium.com/@tohbansoon/differences-between-pre-pre-line-pre-wrap-and-no-wrap-in-css-1fe4b0f72699