語法：
text-overflow : clip | ellipsis
參數(shù)：
clip : 　不顯示省略標(biāo)記（...），而是簡單的裁切
ellipsis : 　當(dāng)對(duì)象內(nèi)文本溢出時(shí)顯示省略標(biāo)記（...）
說明：
設(shè)置或檢索是否使用一個(gè)省略標(biāo)記（...）標(biāo)示對(duì)象內(nèi)文本的溢出。
對(duì)應(yīng)的腳本特性為textOverflow。請參閱我編寫的其他書目。

示例：

div { text-overflow : clip; }

登錄后復(fù)制

CSS2.1中如何實(shí)現(xiàn)text-overflow的效果

看起來不錯(cuò)，我們測試一下

<div style="width:100px;height:20px;text-overflow:ellipsis; ">a b c d e f g h i j k l , msa sd sd sa w df f </div> 
<div style="width:100px;height:20px;text-overflow:ellipsis; white-space:nowrap; overflow:hidden; ">a b c d e f g h i j k l , msa sd sd sa w df f </div>

登錄后復(fù)制

這個(gè)時(shí)候顯示的就是正常的了
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）。只有這樣才能實(shí)現(xiàn)溢出文本顯示省略號(hào)的效果。
一、僅定義text-overflow:ellipsis; 不能實(shí)現(xiàn)省略號(hào)效果。
二、定義text-overflow:ellipsis; white-space:nowrap; 同樣不能實(shí)現(xiàn)省略號(hào)效果
三、按52css.com的教程，即本文所講的方法，同時(shí)應(yīng)用： text-overflow:ellipsis; white-space:nowrap; overflow:hidden; 實(shí)現(xiàn)了所想要得到的溢出文本顯示省略號(hào)效果：

div自動(dòng)適應(yīng)寬度并使用text-overflow實(shí)例

<style> 
#all{ 
float:center; 
text-align:left; 
overflow: hidden;
} 
#a{ 
float:left; 
text-align:left; 
width:100px;height:50px; 
border:1px solid black; 
text-overflow:ellipsis; 
white-space:nowrap; 
padding-bottom: 10000px;margin-bottom: -10000px;
} 
#b{ 
float:left; 
width:40px;height:50px; 
border:1px solid black;
padding-bottom: 10000px;margin-bottom: -10000px; 
} 
</style>

登錄后復(fù)制

以上就是總結(jié)css中的text-overflow屬性的詳細(xì)內(nèi)容，更多請關(guān)注風(fēng)君子博客其它相關(guān)文章！

總結(jié)

以上是生活随笔為你收集整理的总结css中的text-overflow属性(css中的boxshadow属性详解)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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