64 《單多行文字溢位處理方案》

2021-10-25 17:31:32 字數 945 閱讀 4225

title: 《單多行文字溢位處理》

date: 2021-03-07 16:32:35

tags:

1、單行文字溢位處理

注意:設定盒子溢位隱藏

設定文字超出如何進行處理

text-overflow屬性

**示例:

html

文字溢位了文字溢位了文字溢位了文字溢位了文字溢位了文字溢位了

文字溢位了文字溢位了文字溢位了文字溢位了文字溢位了文字溢位了

文字溢位了文字溢位了文字溢位了文字溢位了文字溢位了文字溢位了

文字溢位了文字溢位了文字溢位了文字溢位了文字溢位了文字溢位了

文字溢位了文字溢位了文字溢位了文字溢位了文字溢位了文字溢位了

css

2、多行文字溢位處理

(1)利用webkit私有屬性處理(只有webkit核心的瀏覽器生效)

-webkit-line-clamp: 想要顯示的行數;
(1)利用偽元素模擬溢位顯示省略號的效果(相容性比較好)

完整**如下:

html

文字溢位了文字溢位了文字溢位了文字溢位了文字溢位了文字溢位了

文字溢位了文字溢位了文字溢位了文字溢位了文字溢位了文字溢位了

文字溢位了文字溢位了文字溢位了文字溢位了文字溢位了文字溢位了

文字溢位了文字溢位了文字溢位了文字溢位了文字溢位了文字溢位了

文字溢位了文字溢位了文字溢位了文字溢位了文字溢位了文字溢位了

css

p

p::after

vue多行文字溢位處理

在vue多行文字溢位的問題,工作中需要相容火狐,ie,和谷歌,新增文字kit字首的那種方式火狐和ie不相容,找到一種萬能的方法,如下 mounted fn.xdlines.defaults,options var this this for var k 0 k this.length k var s...

多行文字溢位

大家應該都知道用text overflow ellipsis屬性來實現單行文字的溢位顯示省略號 當然部分瀏覽器還需要加寬度width屬性。css overflow hidden text overflow ellipsis white space nowrap 但是這個屬性並不支援多行文字溢位顯示省...

css 處理 單行 多行 文字溢位

1 單行溢位 前提必須有寬度 width 300px whitewhite space nowrap 文字不會換行。overflow hidden 溢位多餘裁剪 text overflow ellipsis 顯示省略符號來代表被修剪的文字。2 多行文字溢位 因使用了webkit的css擴充套件屬性,...