空白 | white-space (Text) - CSS 中文开发手册 - Break易站
2021-01-27 05:13
空白 | white-space (Text) - CSS 中文开发手册
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——空白字符序列被折叠。源代码中的换行符与其他空白字符处做相同处理。根据需要断行以填充行框。
nowrap——如同normal一样折叠空白区域，但是抑制了源文件中的换行符（文本换行）。
pre——空白字符序列被保留。行仅在源文件和
元素中的换行符处断开。
pre-wrap——空白字符序列被保留。在换行符和
处断行，必要时填充行框。
pre-line——空白字符序列被折叠。在换行符和
处断行，必要时填充行框。
下表总结了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 {
word-wrap: break-word; /* IE 5.5-7 */
white-space: -moz-pre-wrap; /* Firefox 1.0-2.0 */
white-space: pre-wrap; /* Modern browsers */
} 实例如下：
源文件：
?????? 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.
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 | 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) | ? | ? | ? | ? |
文章标题：空白 | white-space (Text) - CSS 中文开发手册 - Break易站
文章链接：http://soscw.com/index.php/essay/47604.html