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

2021-07-10 22:08:36 字數 722 閱讀 3559

由於網頁排版需要,有些地方過長的文字需要加省略號。比如,限制標籤寬度為100px,超出寬度的部分就用神略號顯示,如上圖

html標籤:

< label title =」控制多出文字顯示省略號」>控制多出文字顯示省略號

css 樣式:

label

說明:

標籤寬度一定要設定,可以根據實際情況調整

display:block; –對於一些個別標籤,如a、td、label等是不能使用overflow:hidden的,需要設定此屬性

white-space:nowrap;–強制文字在一行顯示。

overflow:hidden;–超出的文字隱藏

text-overflow:ellipsis;–超出的文字用省略號代替

text-overflow屬性值:

clip:擷取文字

ellipsis:擷取文字多餘用省略號代替

ellipsis-word:省略號後顯示最後乙個字元

–ie、webkit核心瀏覽器(chrome,safari,360和搜狗的高速模式):text-overflow

–opera: -o-text-overflow

–firefox: 不支援

另外,為了可以看到已經 隱藏的文字,可以再標籤中加入title屬性,屬性值為該文字。加該屬性後,

當滑鼠指標移到該標籤上方時會顯示文字全部內容

css 單行或多行多出文字加省略號

單行 overflow hidden 超出的文字隱藏 text overflow ellipsis 溢位用省略號顯示 white space nowrap 溢位不換行 多行 2行以上 overflow hidden text overflow ellipsis display webkit box ...

div多出文字隱藏並用省略號代替

charset utf 8 titletitle ul,ol box box li bgcolor style head class box id box 一劍光寒十九洲劍光寒十九洲劍光寒十九洲li 一劍光寒十九洲劍光寒十九洲劍光寒十九洲li 一劍光寒十九洲劍光寒十九洲劍光寒十九洲li 一劍光寒十九...

CSS控制文字,超出部分顯示省略號

pstyle width 300px overflow hidden white space nowrap text overflow ellipsis 如果實現單行文字的溢位顯示省略號同學們應該都知道用text overflow ellipsis屬性來,當然還需要加寬度width屬來相容部分瀏覽。...