text-overflow

text-overflow : clip | ellipsis

clip : 不顯示省略標記（...），而是簡單的裁切

ellipsis : 當對象內文本溢出時顯示省略標記（...）

div { text-overflow : clip; }

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

a b c d e f g h i j k l , msa sd sd sa w df f

a b c d e f g h i j k l , msa sd sd sa w df f

text-overflow屬性僅是註解，當文本溢出時是否顯示省略標記。並不具備其它的樣式屬性定義。我們想要實現溢出時產生省略號的效果。還必須定義：強制文本在一行內顯示（white-space:nowrap）及溢出內容為隱藏（overflow:hidden）。只有這樣才能實現溢出文本顯示省略號的效果。

一、僅定義text-overflow:ellipsis; 不能實現省略號效果。

二、定義text-overflow:ellipsis; white-space:nowrap; 同樣不能實現省略號效果

三、同時應用： text-overflow:ellipsis; white-space:nowrap; overflow:hidden; 可實現所想要得到的溢出文本顯示省略號效果：

四、若想在Td 裏使用此效果，要把當前的table的樣式定義為 table-layout:fixed,併為單元格Td 設置寬度；否則單元格仍然會隨着字的長度變長 。

IE6+；chrome1.0+,safari3.1+,firefox（opera暫不支持）

設置或檢索是否使用一個省略標記(...)標示對象內文本的溢出。

這個屬性僅僅作用於水平內聯方向的，普通的西方文本的溢出。內聯溢出發生在行內的文本超出可用寬度卻沒有換行機會的時候。

要強制溢出發生並且應用 ellipsis 值，作者必須設置對象的 white-space 屬性值為 nowrap 。

假如沒有換行機會(例如，對象容器的寬度是狹窄的，而內有很長的沒有合理斷行的文本)，沒有應用 nowrap 也有可能溢出。

為了使 ellipsis 值被應用，此屬性必須被設置到具有不可視區域的對象。最好的選擇是設置 overflow 屬性為 hidden 。設置 overflow 屬性為 scroll 或者 auto 時，此屬性也會應用。但是會有滾動條出現。

通過選擇省略標記，隱藏的文本可以被選擇。當選擇發生時，省略標記會隱藏而被文本替換。

此屬性為在DHTML中製作省略標記提供了高效的方法。

此屬性對於 currentStyle 對象而言是隻讀的。對於其他對象而言是可讀寫的。

對應的腳本特性為 textOverflow 。

clip：

當對象內文本溢出時不顯示省略標記（...），而是將溢出的部分裁切掉。

ellipsis：

當對象內文本溢出時顯示省略標記（...）。

^[1]