1.單行文本溢出要滿足三個(gè)條件：
overflow: hidden;
white-space: nowrap;//文本不會(huì)換行，文本會(huì)在在同一行上繼續(xù)决摧，直到遇到 <br> 標(biāo)簽為止。
text-overflow: ellipsis;
單行文本溢出沒有兼容性的問題惠猿，在主流瀏覽器里能正常顯示效果毛好。
2.多行文本溢出需要滿足4個(gè)條件：
display:-webkit-box;
overflow:hidden;
-webkit-box-orient:vertical; //子元素應(yīng)該被水平或垂直排列
-webkit-line-clamp:3; //3行后顯示省略號(hào)
適用范圍：
因使用了WebKit的CSS擴(kuò)展屬性，該方法適用于WebKit瀏覽器及移動(dòng)端躏救；
3.多瀏覽器兼容唯笙，該方法適用范圍廣，但文字未超出行的情況下也會(huì)出現(xiàn)省略號(hào),可結(jié)合js優(yōu)化該方法盒使。
p{position: relative; line-height: 20px; max-height: 40px;overflow: hidden;}
p::after{content: "..."; position: absolute; bottom: 0; right: 0; padding-left: 40px;
background: -webkit-linear-gradient(left, transparent, #fff 55%);
background: -o-linear-gradient(right, transparent, #fff 55%);
background: -moz-linear-gradient(right, transparent, #fff 55%);
background: linear-gradient(to right, transparent, #fff 55%);
}
white-space屬性
white-space屬性設(shè)置如何處理元素內(nèi)的空白崩掘。
可能的值有：
| 值 | 描述 |
|---|---|
| normal | 默認(rèn)∩侔欤空白會(huì)被瀏覽器忽略苞慢。 |
| pre | 空白會(huì)被瀏覽器保留。其行為方式類似 HTML 中的 <pre> 標(biāo)簽英妓。 |
| nowrap | 文本不會(huì)換行挽放，文本會(huì)在同一行上繼續(xù)，直到遇到 標(biāo)簽為止 |
| pre-wrap | 保留空白符序列蔓纠，但是正常地進(jìn)行換行辑畦。 |
| pre-line | 合并空白符序列，但是保留換行符腿倚。 |
| inherit | 規(guī)定應(yīng)該從父元素繼承 white-space 屬性的值纯出。 |
word-break屬性
word-break屬性規(guī)定自動(dòng)換行的處理方式；
可能的值有：normal | keep-all // 只能在半角空格或連字符處換行 | break-all // 允許單詞內(nèi)換行
