纯CSS的多线截断

这是一篇关于使用纯CSS实现多行文本截断的技巧文章，文章介绍了一种巧妙的方法，利用line-height和伪元素来实现文本截断并显示省略号（…）。

文章指出，虽然现在已经有标准化的方式来处理单行文本截断，但多行文本截断仍然比较棘手。 本文介绍的纯CSS方法（无需JavaScript或服务器端操作）因其简洁性而备受推崇。 Firefox 68及以上版本开始支持-webkit-line-clamp，使得该方法的浏览器兼容性得到了改善。

然而，文章重点介绍了一种更巧妙的CSS技巧，该技巧利用line-height进行文本高度计算。 假设元素的line-height为1.4rem，要显示最多三行文本，只需将max-height设置为1.4rem * 3即可。 为了方便使用，文章建议定义一个CSS变量--lh来设置全局line-height：

html {
  --lh: 1.4rem;
  line-height: var(--lh);
}

然后，使用max-height和overflow: hidden实现文本截断：

.truncate-overflow {
  --max-lines: 3;
  max-height: calc(var(--lh) * var(--max-lines));
  overflow: hidden;
}

为了在截断文本后显示省略号，文章使用伪元素::before在文本底部右角添加省略号：

.truncate-overflow::before {
  content: "...";
  position: absolute;
  bottom: 0;
  right: 0;
}

文章还指出，为了避免在文本行数少于--max-lines时显示省略号，可以使用另一个伪元素::after覆盖省略号：

.truncate-overflow::after {
  content: "";
  position: absolute;
  right: 0;
  width: 1rem;
  height: 1rem;
  background: white;
}

文章最后提到了使用CSS逻辑属性（如inset-inline-end代替right）以提高不同语言和文本流场景下的兼容性，并指出了该方法的一个局限性：省略号并非紧贴最后一个单词。 此外，文章还提及了该方法的一个潜在的无障碍问题：如果截断的文本中包含交互元素，这些元素虽然可聚焦但不可见。

以上是纯CSS的多线截断的详细内容。更多信息请关注PHP中文网其他相关文章！