代码分割换行 处理元素中空白 white-space属性

处理元素中空白 white-space属性

1. 应用场景：含代码的编程题展示，需要换行
2. 属性值有：normal | nowrap | pre | pre-wrap | pre-line。默认是normal

<div id="box">
  Hi&nbsp;&nbsp;,
  This   is a incomprehensibilities long word.
  </br>
  你好&nbsp;&nbsp;，
  这   是一个不可思议的长单词
</div>
1
2
3
4
5
6
7

white-space:nowrap

只有才能导致换行！空格被合并，换行符无效.可以理解为：永不换行

white-space:pre-wrap

pre-wrap：preserve+wrap，保留空格和换行符，且可以自动换行。

white-space:pre-line：

pre-line：preserve+newline+wrap。空格被合并了，但是换行符，自动换行还在。

white-space: break-spaces

与pre-wrap类似，除了：

• 任何保留的空白序列总是占用空间，包括在行尾。
• 每个保留的空格字符后都存在换行机会，包括空格字符之间。
• 这样保留的空间占用空间而不会挂起，从而影响盒子的固有尺寸（最小内容大小和最大内容大小）。

3. 应用：
   文字中含有代码需要展示的：

white-space: pre-wrap;
1