這篇文章將為大家詳細(xì)講解有關(guān)CSS中文本溢出顯示省略號效果的示例分析，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

創(chuàng)新互聯(lián)公司成立以來不斷整合自身及行業(yè)資源、不斷突破觀念以使企業(yè)策略得到完善和成熟，建立了一套“以技術(shù)為基點，以客戶需求中心、市場為導(dǎo)向”的快速反應(yīng)體系。對公司的主營項目，如中高端企業(yè)網(wǎng)站企劃 / 設(shè)計、行業(yè) / 企業(yè)門戶設(shè)計推廣、行業(yè)門戶平臺運營、app軟件開發(fā)公司、手機網(wǎng)站制作、微信網(wǎng)站制作、軟件開發(fā)、成都機柜租用等實行標(biāo)準(zhǔn)化操作，讓客戶可以直觀的預(yù)知到從創(chuàng)新互聯(lián)公司可以獲得的服務(wù)效果。

text-overflow屬性表示當(dāng)文本超出包含它的元素時，超出部分應(yīng)該如何顯示。

寫法：text-overflow ： clip | ellipsis

屬性值描述:

clip：表示修剪文本，超出的部分不顯示省略標(biāo)記

ellipsis：表示當(dāng)文本溢出時顯示省略標(biāo)記（...）

注意：text-overflow只是用來說明文字溢出時用什么方式顯示，如果要實現(xiàn)溢出時顯示省略號的效果，還須要求文本在一行內(nèi)顯示（white-space:nowrap）及溢出內(nèi)容為隱藏（overflow:hidden），只有這樣才能實現(xiàn)文字溢出顯示省略號的效果，代碼如下：

text-overflow:ellipsis;

overflow:hidden;

white-space:nowrap;

舉例：生活不止眼前的茍且，還有詩和遠方的田野。你赤手空拳來到人世間，為找到那片海不顧一切。當(dāng)這句話超出規(guī)定的范圍后，給它設(shè)置不同的效果。代碼如下：

div{border:1px solid #000000;width: 300px;white-space: nowrap;overflow: hidden;}
.a1{text-overflow: clip;}
.a2{text-overflow:ellipsis;}



生活不止眼前的茍且，還有詩和遠方的田野。你赤手空拳來到人世間，為找到那片海不顧一切