css中li中控制文字字數,並顯示省略號

2021-06-06 12:01:10 字數 1067 閱讀 1596

取值:

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

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

可惜text-overflow 還只是ie的私有屬性而已,也沒被收錄到w3c標準裡 .

如果想讓某個容器(div或者li或者...塊級元素)顯示一行文字,當文字內容過多時,不換行,而是出現...

這樣寫:例如

html**

html public "-//w3c//dtd xhtml 1.0 strict//en" ""> 

xmlns=""> 

id="box">錦江之星旅館****系亞洲規模最大的綜合性旅遊企業集團

注意:overflow: hidden; text-overflow:ellipsis;white-space:nowrap;一定要一起用

1.一定要給容器定義寬度.

2.如果少了overflow: hidden;文字會橫向撐到容易的外面

3.如果少了white-space:nowrap;文字會把容器的高度往下撐;即使你定義了高度,省略號也不會出現,多餘的文字會被裁切掉

4.如果少了text-overflow:ellipsis;多餘的文字會被裁切掉,就相當於你這樣定義text-overflow:clip.

如果容器是table,當文字內容過多時,不換行,而是出現...

這樣寫:例如

html**

html public "-//w3c//dtd xhtml 1.0 strict//en" ""> 

xmlns=""> 

cellspacing="0" cellpadding="0">錦江之星旅館****系亞洲規模最大的綜合性旅遊企業集團

錦江之星旅館****系亞洲規模最大的綜合性旅遊企業集團

注意:1.一定要給table定義table-layout:fixed;只有定義了**的布局演算法為fixed,下面td的定義才能起作用。

其它的要點和上面一樣

text-overflow 的相容性:

測過ie6,ie7,ff3,safari,opera,chorme,只有ff3和opera不相容

js控制文字字數,並能點選顯示和隱藏

很多時候,你不用考慮文字字數的問題,因為和你多地方,如資料庫 後台控制 都會限制文字字數,但有時候,比如 你的老闆說,我們現在要做乙個簡單的主題介紹單頁,還是要適用於web手機端的 那麼你就有可能會用到以下這段js了,不是特別的複雜,不過一定是實用的。我寫的很粗糙,大神請無視,歡迎給予批評 js h...

js控制文字顯示的字數,超出顯示省略號

在css中我們說了用css控制文字顯示幾行,超出用省略號,但這個辦法是要完全佔滿一整行的,偏偏就是有ui設計師就不這麼幹,是不是很想打他,哈哈哈,我不會的時候都這樣子在心裡罵設計師的,這麼久那麼愛搞特殊呢,罵完就還是好好幹活吧,他們奇特的想法,最終只會促使我們進步而已啦!回歸正題,看結果圖說話。注意...

CSS 控制多出文字顯示省略號

由於網頁排版需要,有些地方過長的文字需要加省略號。比如,限制標籤寬度為100px,超出寬度的部分就用神略號顯示,如上圖 html標籤 label title 控制多出文字顯示省略號 控制多出文字顯示省略號 css 樣式 label 說明 標籤寬度一定要設定,可以根據實際情況調整 display bl...