1.文字不換行
文字不換行，始終都在第一行里:white-space:'nowrap'
| 值 | 描述 |
|---|---|
| normal | 默認(rèn)，空白會(huì)被瀏覽器忽略 |
| pre | 空白會(huì)被瀏覽器保留，其行為方式類(lèi)似HTML中<pre>標(biāo)簽 |
| nowrap | 文本不會(huì)換行，文本會(huì)在痛一行上繼續(xù)，直到遇到 標(biāo)簽 |
| pre-wrap | 保留空白符序列，但是正常地進(jìn)行換行 |
| pre-line | 合并空白符序列，但是保留換行符 |
| inherit | 規(guī)定應(yīng)該從父元素繼承white-space屬性的值 |
2.允許長(zhǎng)單詞換行
word-wrap:break-word
| 值 | 描述 |
|---|---|
| normal | 只在允許的斷字點(diǎn)換行(瀏覽器保持默認(rèn)處理) |
| break-word | 在長(zhǎng)單詞或URL地址內(nèi)部進(jìn)行換行 |
3.換行不截?cái)鄦卧~
word-break:break-all
| 值 | 描述 |
|---|---|
| normal | 使用瀏覽器默認(rèn)的換行規(guī)則 |
| break-all | 允許在單詞內(nèi)換行 |
| keep-all | 只能在半角空格或連字符處換行 |
4.單行文字超出顯示省略號(hào)
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap
5.多行文字超出顯示省略號(hào)
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-line-clamp:3; //顯示文本的行數(shù)，
-webkit-box-orient:vertical;
