在web開發(fā)過程中，常常會(huì)遇到要讓布局中的某些文本根據(jù)寬度來顯示，如果超過最大寬度仍然顯示不完的，就顯示為省略號(hào)的情況。可以通過程序截取，JS字符串截取。在css中可以通過text-overflow進(jìn)行設(shè)置，但是這種效果只適用于單行顯示的文本。

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

text-overflow取值
clip ：不顯示省略標(biāo)記（...），而是簡(jiǎn)單的裁切。
ellipsis：當(dāng)對(duì)象內(nèi)文本溢出時(shí)顯示省略標(biāo)記（...），來代表被修剪的文本。
string：使用給定的字符串來代表被修剪的文本。

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

轉(zhuǎn)載于:https://www.cnblogs.com/bigdesign/p/4051126.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。