css控制溢位內容 用省略號代替顯示

2021-05-27 19:03:43 字數 891 閱讀 8200

如***xx

***內容超過100px 溢位換行

可以用以下css 控制溢位內容用省略號代替

對於td

僅在td的css中使用「overflow:hidden;」是看不到效果的,寫法應該是:

<

style 

type

="text/css"

>

td style

>

<

table 

width

="100%"

border

="1"

cellpadding

="2"

cellspacing

="2"

bordercolor

="#cccccc"

style

="table-layout:fixed"

>

<

tr>

<

td>

afdsssssssssssssssssssssssssasdfasdfasdfasdfasdf

td>

<

td>

afdsssssssssssssssssssssssssasdfasdfasdfasdfasdf

td>

<

td>

afdsssssssssssssssssssssssssasdfasdfasdfasdfasdf

td>

<

td>

afdsssssssssssssssssssssssssasdfasdfasdfasdfasdf

td>

tr>

table

>

注意table-layout:fixed

css實現超出文字溢位用省略號代替

一 單行 實現單行文字的溢位顯示省略號使用text overflow ellipsis屬性,但需要配合使用overflow hidden white space nowrap這兩個屬性使用才能達到效果。注意 如下 overflow hidden text overflow ellipsis whit...

多行文字溢位用省略號代替

1.單行文字溢位 overflow hidden 溢位隱藏 white space nowrap 讓文字不換行 text overflow ellipsis 溢位的文字用省略號代替2.多文字溢位 display webkit box 物件作為彈性伸縮盒子模型顯示 webkit box orient ...

css控制溢位部分顯示省略號

假設乙個顯示文字的標籤,溢位部分顯示顯示 效果如下圖 通過定義css樣式即可實現上圖效果 overflow hidden 溢位隱藏 text overflow ellipsis 文字隱藏後新增省略號 white space nowrap 強制不換行 顯示 n行,超出顯示 word break bre...