CSS控制的內容超過容器寬度後顯示省略號

2021-09-27 03:40:54 字數 1230 閱讀 5920

text-overflow:ellipsis屬性在ff中是沒有效果的。

同時應用: text-overflow:ellipsis; white-space:nowrap; overflow:hidden; 實現了所想要得到的溢位文字顯示省略號效果

text-overflow是乙個比較特殊的屬性,在css手冊中,這個屬性是這樣定義的:

語法: 

text-overflow : clip | ellipsis 

引數: 

clip :  不顯示省略標記(...),而是簡單的裁切

(clip這個引數是不常用的!)

ellipsis :  當物件內文字溢位時顯示省略標記(...)

說明: 

設定或檢索是否使用乙個省略標記(...)標示物件內文字的溢位。

請您注意,text-overflow:ellipsis屬性在ff中是沒有效果的。

示例:div

text-overflow是乙個比較特殊的樣式,我們可以用它代替我們通常所用的標題擷取函式,而且這樣做對搜尋引擎更加友好,如:標題檔案有50個 漢字,而我們的列表可能只有300px的寬度。如果用標題擷取函式,則標題不是完整的,如果我們用css樣式text-overflow: ellipsis,輸出的標題是完整的,只是受容器大小的侷限不顯示出來罷了。

關於text-overflow屬性如何應用,我們作如下的說明講解:

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

一般我們看到的比如新聞列表,為了使文字不回行,控制字數,會通過程式讓多餘的字元顯示省略號,我們只使用css可以達到同樣的效果,雖然不完美。

li
首先是乙個容器,可以是div,li,td等等,先定義寬度,「white-space:nowrap」是強制在一行內顯示所有文字,不回行。「text-overflow:ellipsis」就是關鍵了。

text- overflow是css3新增的屬性,ie6以上版本支援。它可以帶2個引數:clip [不顯示省略標記(...),而是簡單的裁切],ellipsis[當物件內文字溢位時顯示省略標記(...)]。所以,這個方法是不支援firefox 的。因此,我們還要加上一句overflow: hidden,讓多餘文字在ff中隱藏

CSS內容超過寬度顯示省略號

實現 overflow hidden 超出的文字隱藏 text overflow ellipsis 溢位用省略號顯示 white space nowrap 溢位不換行沒效果解決方案 放置文字的元素使用塊級元素 例如 p,div,不要使用 span 等行內元素。例 css text html 你好你好...

CSS容器寬度的困惑

在標準css中,width 寬度 僅是包含容器內容的寬度,容器實際所占用的寬度還應加上padding 填充 和border 邊框 高度也相類似 容器占用寬度 width padding border firefox瀏覽器嚴格遵循這一定義,但在ie瀏覽器上width卻是指容器實際所占用的寬度,這就使得...

css 超過寬度的文字顯示點點

要顯示為點點,3個缺一不可,還有,除了firefox,opera其他瀏覽器都支援,包括可惡的ie6。如下 text overflow ellipsis white space nowrap overflow hidden 解釋一下 text overflow ellipsis 讓截斷的文字顯示為點點...