最近遇到一个奇怪的问题,就是用ellipsis做多行省略的时候,发现如果设置了padding文字就出溢出,我们先来看一个我们需要实现的效果:

问题分析

首先我们很容易看到这是一个多行省略的效果,这个很简单,关键代码如下:

现在我们要在这个的下面绘制一条线,自然而然我们会想到加一个padding:

我们会发现与原本规定只显示两行的文字溢出来了,我们看看盒子模型:

我们可以发现,下面的padding没有遮住露出来的文字,这个不知道是不是浏览器的bug,解决的方案就是利用一个:after将padding底部给遮住:

上图黄色的表示margin,绿色的表示padding,padding底部本来文字是露出来的,现在我们用:after遮住了,关键css如下:

当然,还有其他的解决方案,例如外层再嵌套一个来设置border。

其他文章

0
我要评论

评论

返回
×

我要评论

回复:

昵称:(昵称不超过20个字)

图片:

提交
还可以输入500个字