本篇文章為大家展示了怎么使用css text-overflow屬性，代碼簡明扼要并且容易理解，絕對(duì)能使你眼前一亮，通過這篇文章的詳細(xì)介紹希望你能有所收獲。

創(chuàng)新互聯(lián)公司堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：成都網(wǎng)站建設(shè)、網(wǎng)站制作、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時(shí)代的青山湖網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

css text-overflow屬性用于指定當(dāng)文本溢出包含它的元素時(shí)，應(yīng)該發(fā)生什么事情。所有主流瀏覽器都支持 text-overflow 屬性。

css text-overflow屬性怎么用？

text-overflow 屬性規(guī)定當(dāng)文本溢出包含元素時(shí)發(fā)生的事情。

語法：

text-overflow: clip|ellipsis|string;

屬性值：

●　clip：修剪文本。

●　ellipsis：顯示省略符號(hào)來代表被修剪的文本。

●　string：使用給定的字符串來代表被修剪的文本。

注釋：所有主流瀏覽器都支持 text-overflow 屬性。

css text-overflow屬性 示例

 



以下 div 容器內(nèi)的文本無法完全顯示，可以看到它被裁剪了。
div 使用 "text-overflow:ellipsis":
This is some long text that will not fit in the box
div 使用 "text-overflow:clip":
This is some long text that will not fit in the box
div 使用自定義字符串 "text-overflow: >>"(只在 Firefox 瀏覽器下有效):
This is some long text that will not fit in the box

效果圖：

上述內(nèi)容就是怎么使用css text-overflow屬性，你們學(xué)到知識(shí)或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。