为什么线夹不能与填充一起使用？

Question

我正在尝试对 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>

我如何解决它？

编辑：

抱歉，我忘了说我需要像这样的底部边框：

 .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>

我希望我不必将它包裹在另一个 div 周围

Answer 1

改为添加透明边框

 .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>

Answer 2

line-clamp只是在设置行之后夹紧文本。 但它并没有从 dom 中删除文本。

例如， line-clamp: 3结果如下：

Hello World
This is
An Exammple...
For this Post

这就是我们添加overflow: hidden; 隐藏它。

但是填充会让你的盒子更大，所以overflow只会在你的填充之后发生。

一种解决方案是将标题包装在包装器 div 中并在那里设置填充。

片段包含一个没有溢出的示例，用于可视化

 .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>