在web開發過程中，常常會遇到要讓布局中的某些文本根據寬度來顯示，如果超過最大寬度仍然顯示不完的，就顯示為省略號的情況?？梢酝ㄟ^程序截取，JS字符串截取。在css中可以通過text-overflow進行設置，但是這種效果只適用于單行顯示的文本。

text-overflow語法
text-overflow: clip|ellipsis|string;

text-overflow取值
clip ：不顯示省略標記（...），而是簡單的裁切。
ellipsis：當對象內文本溢出時顯示省略標記（...），來代表被修剪的文本。
string：使用給定的字符串來代表被修剪的文本。

text-overflow說明
1、text-overflow屬性僅是注解，當文本溢出時是否顯示省略標記。并不具備其它的樣式屬性定義。要實現溢出時產生省略號的效果還須定義：強制文本在一行內顯示（white-space:nowrap）及溢出內容為隱藏（overflow:hidden），也就是說 overflow: hidden; text-overflow:ellipsis;white-space:nowrap;一定要一起用，只有這樣才能實現溢出文本顯示省略號的效果。
2、一定要給容器定義寬度.
3、如果少了overflow: hidden;文字會橫向撐到容器的外面
4、如果少了white-space:nowrap;文字會把容器的高度往下撐；即使你定義了高度，省略號也不會出現，多余的文字會被裁切掉
5、如果少了text-overflow:ellipsis;多余的文字會被裁切掉，就相當于你這樣定義text-overflow:clip.
6、如果容器是table，當文字內容過多時，不換行，而是出現...
7、對應的腳本特性為 textOverflow 。 object.style.textOverflow="ellipsis"　

轉載于:https://www.cnblogs.com/bigdesign/p/4051126.html

總結

以上是生活随笔為你收集整理的text-overflow的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。