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