空白 | 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属性被指定为从下面的列表中的任意一个关键字。
可能的值
下表总结了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) | ? | ? | ? | ? |
本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com
