white-space 是 CSS 的属性。从字面上来看,这是一个与空白相关的属性。好像也没啥东西,但从其实没那么简单。
详细介绍
white-space 属性可以包括以下 3 个方面内容
**1 如何处理文本内容中的多个空格和 Tab? **
策略1: 折叠。如果多个空格和 Tab 在文本内容中间,则合成一个空格;如果在文本内容开头,则忽略。如
A bunch of 此处有Tab words you see.中文 测试。
折叠后变成
A bunch of words you see.中文 测试。
策略2: 保持原样。有几个空格,Tab 就显示几个。
2 如何处理换行符?
策略1: 忽略。如
<div>aaa
bbb</div>
忽略后变成
<div>aaabbb</div>
策略2: 换行。
3 在文本内容超出容器宽度时,如何处理?
策略1: 换行。
策略2: 不换行。
white-space 有如下可选值
- normal(默认值)
- nowrap
- pre
- pre-wrap
- pre-line
这些值的具体说明
换行符 | 空格和 Tab | 文本超出容器宽度 | |
---|---|---|---|
nomal | 忽略 | 折叠 | 换行 |
nowrap | 忽略 | 折叠 | 不换行 |
pre | 换行 | 保持原样 | 不换行 |
pre-wrap | 换行 | 保持原样 | 换行 |
pre-line | 换行 | 折叠 | 换行 |
兼容性
主流浏览器,甚至包括 IE6 都支持 white-space 的所有值。
吐槽
这个属性比较让人不爽的。只看其值并不能轻松的知道其具体的设置。如果将其拆分成三个属性:
- new-line :值为 preserve 或 collapse
- space-and-tab: 值为 preserve 或 collapse
- text-wrapping: 值为 wrap 或 nowrap
然后 white-space 为以上属性的一个简写
white-space: [new-line] [space-and-tab] [text-wrapping];
这样,理解 white-space 简单的多,设置起来也灵活的多。
参考
本文遵守创作共享CC BY-NC-SA 4.0协议
网络平台如需转载必须与本人联系确认。