空白 | white-space
white-space
white-spaceCSS属性决定如何对元素内的空白进行处理。为了语句在中间断开，可以使用overflow-wrap，word-break或hyphens代替。
/* Keyword values */
white-space: normal;
white-space: nowrap;
white-space: pre;
white-space: pre-wrap;
white-space: pre-line;
/* Global values */
white-space: inherit;
white-space: initial;
white-space: unset;
| Initial value | normal |
|---|---|
| Applies to | all elements |
| Inherited | yes |
| Media | visual |
| Computed value | as specified |
| Animation type | discrete |
| Canonical order | the unique non-ambiguous order defined by the formal grammar |
语法
white-space属性被指定为从下面的列表中的任意一个关键字。
可能的值
normal——空白字符序列被折叠。源代码中的换行符与其他空白字符处做相同处理。根据需要断行以填充行框。
下表总结了white-space的可能值：
| | New lines | Spaces and tabs | Text wrapping |
|---|---|---|---|
| normal | Collapse | Collapse | Wrap |
| nowrap | Collapse | Collapse | No wrap |
| pre | Preserve | Preserve | No wrap |
| pre-wrap | Preserve | Preserve | Wrap |
| pre-line | Preserve | Collapse | Wrap |
形式语法
normal | pre | nowrap | pre-wrap | pre-line
实例
基本实例
code {
white-space: pre;
}
<pre>元素内部的换行符
pre {
word-wrap: break-word; /* IE 5.5-7 */
white-space: -moz-pre-wrap; /* Firefox 1.0-2.0 */
white-space: pre-wrap; /* Modern browsers */
}
实例如下：
源文件：
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
CSS+结果
规范
| Specification | Status | Comment |
|---|---|---|
| CSS Text Module Level 3The definition of 'white-space' in that specification. | Working Draft | Precisely defines the breaking algorithms. |
| CSS Level 2 (Revision 1)The definition of 'white-space' in that specification. | Recommendation | Initial definition. |
浏览器兼容性
| Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|---|
| Basic support (normal and nowrap) | 1.0 | (Yes) | 1.0 (1.7 or earlier) | 5.51 | 4.0 | 1.0 (85) |
| pre | 1.0 | (Yes) | 1.0 | 6.0 | 4.0 | 1.0 (85) |
| pre-wrap | 1.0 | (Yes) | 1.0 (1.7 or earlier)-moz 3.0 (1.9) | 8.0 | 8.0 | 3.0 (522) |
| pre-line | 1.0 | (Yes) | 3.5 (1.9.1) | 8.0 | 9.5 | 3.0 (522) |
| Support on <textarea> | 1.0 | ? | 36 (36) | 5.5 | 4.0 | 1.0 (85) |
| Feature | Android | Edge | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
| Basic support | ? | (Yes) | ? | ? | ? | ? |
