使用css3實現文字超出省略號和多行省略號

2021-09-19 23:50:08 字數 664 閱讀 4743

overflow:hidden; (超出部分隱藏)

text-overflow:ellipsis;(隱藏部分用省略號)

white-space:nowrap;(不換行)

overflow: hidden;(超出部分隱藏)

text-overflow: ellipsis; (隱藏部分用省略號)

display: -webkit-box;

-webkit-line-clamp: 3;(web布局固定行數3行)

-webkit-box-orient: vertical;(webbox方向垂直?)

這裡要注意不要給標籤新增高度,讓文字自動撐開多行就行

備註:box-orient           子元素排列 vertical or horizontal

box-flex             兄弟元素之間比例,僅作乙個係數

box-align            box 排列

box-direction        box 方向

box-flex-group       以組為單位的流體係數

box-lines

box-ordinal-group    以組為單位的子元素排列方向

box-pack以下是關於flexible box的幾個例項

文字超出省略號之前後省略號實現

標籤 css js 最近在做聊天記錄需求時,對於查到的訊息體需要高亮顯示,前後內容超出需要顯示省略號,效果如下圖 對於後省略號是可以通過的一串css來實現的,主要是css的 段如下 css省略號 段 overflow hidden text overflow ellipsis position re...

文字超出省略號型別

overflow hidden 超出的文字隱藏 text overflow ellipsis 溢位用省略號顯示 white space nowrap 溢位不換行overflow hidden text overflow ellipsis display webkit box 作為彈性伸縮盒子模型顯示...

css3實現文字溢位省略號( )顯示

css3實現文字溢位省略號 顯示,如下 片段 charset utf 8 無標題文件title type text css pstyle head css3實現單行文字溢位會顯示省略號 p body html overflow hidden 文字溢位隱藏 white space nowrap 文字不...