CSS控制字型超過容器時顯示省略號

2021-07-03 03:11:51 字數 1034 閱讀 5826

注意:容器需要有固定寬度,可用display:block-inline;並設定其寬度。

樣式解析:

overflow

檢索或設定當物件的內容超過其指定高度及寬度時如何管理內容。

取值:visible   : 預設值。不剪下內容也不新增滾動條。假如顯式宣告此預設值,物件將以包含物件的 window 或 frame 的尺寸裁切。並且 clip 屬性設定將失效

auto   : 在必需時物件內容才會被裁切或顯示滾動條

hidden   : 不顯示超過物件尺寸的內容

scroll   : 總是顯示滾動條

white-space

設定或檢索物件內空格的處理方式。

取值:normal   : 預設值。預設處理方式。文字自動處理換行。假如抵達容器邊界內容會轉到下一行

pre   : 換行和其他空白字元都將受到保護。這個值需要ie6+或者 !doctype 宣告為 standards-compliant mode 支援。如果 !doctype 宣告沒有指定為 standards-compliant mode ,此屬性可以使用,但是不會發生作用。結果等同於 normal 。參閱 pre 物件

nowrap   : 強制在同一行內顯示所有文字,直到文字結束或者遭遇 br 物件。參閱 nowrap 屬性

text-overflow

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

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

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

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

**:

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

text overflow ellipsis屬性在ff中是沒有效果的。同時應用 text overflow ellipsis white space nowrap overflow hidden 實現了所想要得到的溢位文字顯示省略號效果 text overflow是乙個比較特殊的屬性,在css手冊中...

CSS 2行文字時正常顯示,超過2行顯示更多

在做頁面時,ui有乙個這樣的需求,當描述中不超過2行文字時,則正常顯示在頁面上,超過2行的時候,顯示更多 想法是這樣的 1 不能根據字數的多少判斷行數,因為電腦螢幕大小不一樣,故一行文字的字數也不同 2 也不能用 webkit line clamp 2 因為這樣 更多 無法顯示,被隱藏的文字也無法顯...

css 控制文字超出時顯示省略號

不多說,直接看 吧 doctype html html head meta charset utf 8 title 內容超出顯示省略號 title style limitword style head body p class limitword 這是內容1這是內容2這是內容3這是內容4這是內容5這...