IT兄弟連 HTML5教程 CSS3屬性特效 定義省略文本的處理方式

 

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

省略文本的參數說明如表1所示。

表1 省略文本參數說明

 

    

若是想讓某個容器（div或者li或者...塊級元素）顯示一行文字，當文字內容過多時，不換行，而是出現「...」。應注意如下幾點：

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

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

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

咱們能夠經過text-overflow爲列表限制長度，超出長度的文字用省略號代替。代碼以下所示：

 

使用瀏覽器直接打開這個文件，就能夠看到瀏覽器對這個網頁文件解釋後的結果，如圖1所示。

圖1  文字從右向左排版