我們都知道，當(dāng)我們遇到若文本溢出并顯示省略號(hào)的需求時(shí)，只需要在css上添加下面的代碼即可，但是，如果是在表格中，我們會(huì)驚奇的發(fā)現(xiàn)，這些代碼并沒有起作用。

.ell {
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis;
}

不僅如此，連我們設(shè)置的寬度也沒有起作用，單元格全靠內(nèi)容撐開，類似下面這樣。

image.png

那么如何解決這個(gè)問題呢，實(shí)際上很簡單，只需要在table上添加一行。

table-layout: fixed;

那么我們再來看一下效果：

image.png

可以看到已經(jīng)能夠正常顯示了。
那如果我們想要讓他顯示兩行，然后再溢出顯示省略號(hào)呢？可以這樣寫。

.multi {
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2; // 顯示的行數(shù)
    overflow:hidden;
}

image.png

這樣就實(shí)現(xiàn)了，但是需要注意的是，我現(xiàn)在多行顯示的不是一個(gè)完整的字符，中間有空格間隔，但是如果是像上面那樣一長串的連續(xù)字符呢？就會(huì)變成這樣，多行顯示又失效了。

image.png

這時(shí)候只需要添加一個(gè)屬性就好了。

word-break: break-all;

word-break: normal | break-all | keep-all;
normal: 使用瀏覽器默認(rèn)的換行規(guī)則
break-all: 允許在單詞內(nèi)換行
keep-all: 只能在半角空格或連字符處換行

然后我們再來看一下效果

image.png

完美。