为什么添加padding后line-clamp属性失效？无需额外嵌套div如何修复？

首先你代码里存在一个无效属性配置：text-overflow的有效值不包含hidden，如果你需要末尾显示省略号，需要改为text-overflow: ellipsis。

问题原因 #

-webkit-line-clamp的行数计算是基于元素的内容盒（content-box）高度，你给元素添加了上下各1rem的padding后，元素总高度增加，可容纳的文本内容变多，就会出现显示行数超出限制的问题。

无需嵌套div的修复方案 #

通过固定行高+显式设置max-height限制元素总高度，即可规避padding对显示行数的影响，修复后的代码如下：

.title{
  padding:1rem;
  width:10%;
  background-color:red;
  word-break: break-all;
  line-height: 1.4; /* 固定行高用于计算总高度，可按需调整数值 */
  max-height: calc(3 * 1.4em + 2rem); /* 3行文本高度 + 上下padding总和 */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis; /* 修正无效属性值 */
}

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

原理说明 #

显式设置的max-height会把元素总高度限制为刚好容纳3行文本+上下padding+border的尺寸，配合overflow:hidden，即使padding挤占了部分空间也不会出现多显示文本的问题，同时保留了原有的padding和border样式，不需要额外嵌套DOM元素。

内容的提问来源于stack exchange，提问作者user15573857