總結css中的text-overflow屬性

語法： 
text-overflow : clip | ellipsis 
參數： 
clip : 　不顯示省略標記（...），而是簡單的裁切 
# ellipsis : 　當物件內文字溢位時顯示省略標記（...） 
說明： 
設定或檢索是否使用一個省略標記（...）標示物件內文字的溢位。 
對應的腳本特性為textOverflow。請參閱我所寫的其他書目。
 
範例： 

div { text-overflow : clip; }

CSS2.1如何實作text-overflow的效果 

#看起來不錯，我們測試一下

<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>

這個時候顯示的就是正常的了
text-overflow屬性僅是註解，當文字溢出時是否顯示省略標記。並不具備其它的樣式屬性定義。我們想要實現溢出時產生省略號的效果。也必須定義：強製文字在一行內顯示（white-space:nowrap）及溢位內容為隱藏（overflow:hidden）。只有這樣才能實現溢出文字顯示省略號的效果。
一、僅定義text-overflow:ellipsis; 不能實現省略號效果。
二、定義text-overflow:ellipsis; white-space:nowrap; 同樣不能實現省略號效果
三、按52css.com的教程，即本文所講的方法，同時應用： text-overflow:ellipsis ; white-space:nowrap; overflow:hidden; 實現了想要得到的溢出文字顯示省略號效果：

div自動適應寬度並使用text-overflow實例

<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>

以上是總結css中的text-overflow屬性的詳細內容。更多資訊請關注PHP中文網其他相關文章！