1. 程式人生 > >關於text-overflow和white-space

關於text-overflow和white-space

兩者都是CSS文字屬性,首先說明一下:

※ text-overflow:clip | ellipsis
版本:IE6+專有屬性
取值:clip 預設值。不顯示省略標記(…),而是簡單的裁切;
ellipsis 當物件內文字溢位時顯示省略標記(…) 。
說明:設定或檢索是否使用一個省略標記(…) 標示物件內文字的溢位。
這個屬性僅僅作用於水平內聯方向的,普通的西方文字的溢位。內聯溢位發生在行內的文字超出可用寬度卻沒有換行機會的時候。

※ white-space:normal | pre | nowrap | inherit
版本:未知
取值:normal 預設值。文字自然換行。如果超過元素寬度,內容自然換到下一行;
nowrap 不允許換行;
inherit 瀏覽器自動選擇;
pre 保留換行和空白。這個值只有當你聲明瞭!DOCTYPE,且 IE 6 以上版本才支援。
說明:用來處理空白,適用於所有塊型別的元素 (block elments)。
在 HTML檔案裡,空白,比如換行符 (line breaks)、 空格 (spaces)、 製表符 (tabs),都被自動截去。HTML會自動截去多餘的空格。不管你加多少空格,都被看做一個空格。為了在網頁中增加空格,你可以使用 &nbsp; 表示空格。你也可以用<br>強制換行。

要強制溢位發生並且應用ellipsis 值,必須設定物件的white-space 屬性值為nowrap 。
假如沒有換行機會(例如,物件容器的寬度是狹窄的,而內有很長的沒有合理斷行的文字),沒有應用 nowrap 也有可能溢位。
為了使 ellipsis 值被應用,此屬性必須被設定到具有不可視區域的物件。最好的選擇是設定overflow 屬性為 hidden 。設定overflow 屬性為scroll 或者auto 時,此屬性也會應用。但是會有滾動條出現。
通過選擇省略標記,隱藏的文字可以被選擇。當選擇發生時,省略標記會隱藏而被文字替換。
此屬性為在DHTML中製作省略標記提供了高效的方法。
此屬性對於currentStyle 物件而言是隻讀的。對於其他物件而言是可讀寫的。
對應的指令碼特性為textOverflow 。
示例:
div {overflow: hidden; text-overflow:ellipsis; }

在百度空間中,為了節約空間,我們可結合二者,將好友最新文章的摘要換作一行顯示(也可以用於其他模組)。鄙人已編輯的CSS如下,效果見本空間主頁:

#mod_friblog div.item a.cnt{width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
html>body #mod_friblog div.item a.cnt{-moz-text-overflow:ellipsis;} /*此句為了相容firefox*/