在bootstrap 4中实现多行文本截断，核心做法是结合css的`-webkit-line-clamp`属性与`display: -webkit-box`布局。通过设置`-webkit-box-orient: vertical`限制盒子方向，并指定`line-clamp`数值，即可让超出指定行数的文本显示省略号。这种方法适用于大多数现代浏览器，但在ie和旧版edge上需要额外的回退方案或javascript支持。
如何针对特定行数实现截断
要实现精确的行数控制，需将元素设为弹性盒子的变体，并应用WebKit私有属性。例如，限制为两行时，设置`max-height`为行高的两倍，配合`overflow: hidden`和`text-overflow: ellipsis`。关键在于必须显式声明`-webkit-box-orient: vertical`，因为某些构建工具可能会重置此属性。
.line-clamp-2 {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}如何处理非WebKit浏览器的兼容性
对于不支持`-webkit-line-clamp`的浏览器，如Firefox或Safari的新版本（尽管新版Safari已支持），可以使用`mask-image`或纯CSS的`height`限制加`overflow: hidden`作为降级方案。虽然无法完美显示省略号，但能确保文本不被溢出破坏布局。更稳健的做法是使用JavaScript库如`clamp.js`，或在服务端进行截断。
立即学习“前端免费学习笔记（深入）”；
.fallback-clamp {
height: 3.2em; /* 假设行高1.6em，两行 */
line-height: 1.6em;
overflow: hidden;
position: relative;
}
.fallback-clamp::after {
content: "...";
position: absolute;
bottom: 0;
right: 0;
background: white;
}当容器宽度变化时截断行为如何表现
在响应式布局中，当容器宽度随视口变化时，文本截断的行为取决于`width`属性的设置。如果设置了固定宽度或百分比宽度，文本会在达到最大高度前换行，一旦行数超过设定值，末尾字符将被替换为省略号。若未设置宽度，元素可能扩展导致布局变形，因此建议配合`min-width`或`max-width`使用，确保截断逻辑在合理范围内触发。
