空白 | 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/essay/47604.html