text-overflow

設定或檢索是否使用一個省略標記(...)標示對象內文本的溢出。 對應的腳本特性為textOverflow。

語法,參數,示例,測試,顯示結果,兼容性,說明,取值,說明,

語法

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:
當對象內文本溢出時顯示省略標記(...)。

說明

設定或檢索是否使用一個省略標記(...)標示對象內文本的溢出。
對應的腳本特性為textOverflow

相關詞條

熱門詞條

聯絡我們