為什么線夾不能與填充一起使用？

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>