[toc] ## 各属性值 |属性 |换行 |空格和制表 |文本环绕(换行) | | --- | --- | --- | --- | |normal |合并 |合并 |环绕 | |nowrap |合并 |合并 |不环绕 | |pre |保留 |保留 |不环绕 | |pre-wrap |保留 |保留 |环绕 | |pre-line |保留 |合并 |环绕 | 如果合并空格，会让多个空格变成一个，也就是我们平常看到的效果，敲了 10个空格，结果页面就1个空格 如果合并换行，会把多个连续换行合并成1个，**并**当做1个普通空格处理（键盘空格键敲出来的那个空格） 如果文本环绕，一行文字内容超出容器宽度时，会自动从下一行开始显示 ## white-space与最大可用宽度 1. 绝对定位时一柱擎天栗子， 2. 单行文字溢出点点点效果 ``` text-overflow:ellipsis; white-space:nowrap; ``` 3. 水平列表切换效果 ``` .box{ width:300px; position:relative; overflow:hidden; } .box>ul{ position:absolute; white-space:nowrap; } .box>ul>li{ display:inline-block; } ``` ## 与flex 如果是flex，想要用`white-space:nowrap`和`text-overflow:ellipsis`和`overflow:hidden`搭配起来起到文字省略的效果，需要加上 ``` /* 解决ellipsis不显示的问题，貌似是因为flex原因 */ min-width:0; ```