[英]why is line-clamp not working with padding?
I'm trying to line-clamp 3 lines, but for some reason when I add padding it doesn't seem to work and moves to 4 lines like this:我正在尝试对 3 行进行线夹,但由于某种原因,当我添加填充时,它似乎不起作用并移至 4 行,如下所示:
.title{ padding:1rem; width:10%; background-color:red; word-break: break-all; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: hidden; }
<div class='title'> Testing Testing Testing Testing Testing Testing Testing </div>
How do I fix it?我如何解决它?
Edit:编辑:
My apologies, I forgot to mention I require border at the bottom like this:抱歉,我忘了说我需要像这样的底部边框:
.title{ padding:1rem; width:10%; background-color:red; word-break: break-all; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: hidden; }.title:nth-of-type(1){ border-bottom:solid 1px black; }
<div class='title'> Testing Testing Testing Testing Testing Testing Testing </div> <div class='title'> Testing Testing Testing Testing Testing Testing Testing </div>
I'm hoping that I won't have to wrap it around another div我希望我不必将它包裹在另一个 div 周围
add a transparent border instead改为添加透明边框
.title{ border:1rem solid #0000; box-shadow:0 1px 0 #000; /* your border */ margin-bottom:1px; width:10%; background-color:red; word-break: break-all; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: hidden; }
<div class='title'> Testing Testing Testing Testing Testing Testing Testing </div>
line-clamp
is just clamping the text after set lines. line-clamp
只是在设置行之后夹紧文本。 But it is not removing text from the dom.但它并没有从 dom 中删除文本。
For example, line-clamp: 3
results in the following:例如,
line-clamp: 3
结果如下:
Hello World
This is
An Exammple...
For this Post
This is why we add an overflow: hidden;
这就是我们添加
overflow: hidden;
to hide it.隐藏它。
But an padding will make your box bigger, so the overflow
is only happing after your padding.但是填充会让你的盒子更大,所以
overflow
只会在你的填充之后发生。
A solution can be to wrap your title in an wrapper div and set the padding there.一种解决方案是将标题包装在包装器 div 中并在那里设置填充。
Snippet contains an example without the overflow, for visualiziation片段包含一个没有溢出的示例,用于可视化
.title{ padding:1rem; width:10%; background-color:red; word-break: break-all; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
<div class='title'> Testing Testing Testing Testing Testing Testing Testing </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.