在css中实现多行文本超出显示省略号截断，核心方法是结合使用 -webkit-line-clamp 属性与 display: -webkit-box。你需要将容器设置为弹性盒模型（-webkit-box），指定 line-clamp 为具体的行数，并设置 overflow: hidden。这种方法适用于webkit内核浏览器及基于chromium的现代浏览器，能自动在指定行数末尾添加省略号。
如何配置CSS属性以支持两行截断
要实现两行文本截断，必须确保元素具有块级或弹性盒布局特性，并显式声明最大行数。关键步骤是设置 display: -webkit-box、-webkit-box-orient: vertical 以及 -webkit-line-clamp: 2。同时，父容器需限制宽度或高度，否则文本会无限延伸而不触发截断。此方法在非WebKit内核（如Firefox）中不直接生效，需回退方案。
.text-truncate-2lines {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
width: 300px; /* 必须限制宽度 */
}
上述代码定义了一个类 .text-truncate-2lines。当应用于包含长文本的 标签时，若文本超过两行，第三行开头将被隐藏并显示省略号。注意 -webkit-box-orient: vertical 在某些构建工具中可能被移除，需通过注释或插件保留。实际效果取决于容器宽度，窄容器更易触发截断。
为什么非WebKit浏览器不支持该属性及替代方案
非WebKit浏览器（如Firefox、Safari旧版）不支持 -webkit-line-clamp，因为这是WebKit私有属性。替代方案是使用 height 配合 overflow: hidden 和伪元素模拟省略号，但无法精确控制行数。另一种方法是使用JavaScript动态计算高度并插入省略号，但这增加了复杂度。目前最佳实践是为WebKit提供原生支持，为非WebKit提供降级处理。
.text-truncate-fallback {
height: 3.6em; /* 假设行高1.2em，三行 */
overflow: hidden;
position: relative;
}
.text-truncate-fallback::after {
content: "...";
position: absolute;
bottom: 0;
right: 0;
background: white; /* 需匹配背景色 */
}
上述代码展示了基于高度的回退方案。它固定容器高度为三行文本的高度，并通过伪元素 ::after 在右下角添加省略号。这种方法简单但不精确，可能截断部分字符或显示不完整。建议优先使用 -webkit-line-clamp，并在必要时结合媒体查询或JS进行增强。
当文本内容不足两行时会发生什么
当文本内容不足两行时，-webkit-line-clamp: 2 不会强制换行或添加省略号，文本将正常显示所有行。容器高度由内容决定，除非显式设置 min-height。这意味着该属性仅在文本超出指定行数时才生效，对短文本无影响。开发者无需担心短文本被错误截断，但需注意容器宽度是否足够容纳单行文本。
,
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
