处理元素中空白 white-space属性
- 应用场景:含代码的编程题展示,需要换行
- 属性值有:normal | nowrap | pre | pre-wrap | pre-line。默认是normal
<div id="box">
Hi ,
This is a incomprehensibilities long word.
</br>
你好 ,
这 是一个不可思议的长单词
</div>
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类似,除了:
- 任何保留的空白序列总是占用空间,包括在行尾。
- 每个保留的空格字符后都存在换行机会,包括空格字符之间。
- 这样保留的空间占用空间而不会挂起,从而影响盒子的固有尺寸(最小内容大小和最大内容大小)。
- 应用:
文字中含有代码需要展示的:
white-space: pre-wrap;