超出部分省略號的形式進行顯示

2021-10-03 00:00:26 字數 743 閱讀 5739

文字類容一般都是全部顯示的,而在有些情況下我們需要讓他不顯示出來,例如

要做出這種情況我只需要三段**就可以實現了, 具體來看一下**:

"box">

我是乙個p元素,我是乙個p元素,我是乙個p元素

**效果:

我們可以看到文字類容卻是是顯示出來了,但是只有一行文字.如果我們需要顯示兩行文字或者三行文字的話,那麼我們就需要進行其他的操作.

重點:不能有高度,因為這段-webkit-line-clamp屬性設定了值之後那麼你設定的是幾那麼他就只佔據幾段文字的高度,如果設定了高度而且高度大於你設定的數字高度,那麼剩餘的文字就會以不佔據空間的方式顯示出來

"box">

我是乙個p元素,我是乙個p元素,我是乙個p元素

**效果:

如果需要顯示多行文字值需要在-webkit-line-clamp的屬性值裡面需要顯示幾行就新增數字就可以了

超出部分省略號

單行省略 overflow hidden text overflow ellipsis white space nowrap 多行省略 display webkit box webkit box orient vertical webkit line clamp 3 overflow hidden ...

css超出部分省略號

本文 如果實現單行文字的溢位顯示省略號同學們應該都知道用text overflow ellipsis屬性來,當然還需要加寬度width屬來相容部分瀏覽。p效果如下 你好 單行省略號測試,省略部分 p效果如下 你好 單行省略號測試,省.略部分呢,測測測測測測測測 試測試測試測試測試試試 因使用了web...

CSS超出部分省略號

1,單行文字實現超出部分省略號 overflow hidden 超出的文字隱藏 text overflow ellipsis 溢位用省略號顯示 white space nowrap 溢位不換行 2,多行文字實現超出部分省略號 overflow hidden text overflow ellipsi...