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

Question

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