相信前端朋友都知道如何讓超出文本變成省略號，不管是單行還是多行估計都難不倒大家。
如果不會多行超出文本變成省略號的可看筆者的這篇博客：多行文本溢出變成省略號【附帶失效解決代碼】
但是我們之前都是設置的固定多少px寬度然後讓他超出那個寬度換行，現在的需求改爲了超過二十個字或者十五個字的時候纔開始變成省略號，那我們怎麼辦呢？
筆者之前開發的時候的解決辦法是用js處理，判斷多少個字了，如果到多少字剩下的就截取掉替換爲…。然後把原文本用tooltip的形式展示。
但是筆者怎麼想都感覺用css不太爽，那麼我們怎麼辦呢？
筆者先透漏一個小關鍵點：em單位
我們寫一個公共的css樣式：
.overflowEllipsisStyle {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
注意哦，這是一個公共樣式，所以我們給它設置width不太好，當然了，你也可以設置一個公共的寬度。無所謂。
而後當我們使用他的時候給那個元素或者組件加入一個行內樣式的寬度即可。這樣就很靈活。【在上面樣式也樣式也會被我們的行內樣式覆蓋，行內樣式的權重更高。不懂樣式權重的可自行百度】。
接下來寫個想要在第二十個文字的時候變成省略號，那麼就這樣：
<p class="overflowEllipsisStyle" style="width: 20em">
一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十
</p>
備註：
如果想要第二十個字還展示的話那就設置21em。
1em相當於是一個字的寬度。
效果如下：
