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

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

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>

Answer 2

改为添加透明边框

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

使用边距而不是填充为我完成了这项工作。