[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; ```