巧用CSS实现固定大小Div中多行文本的省略号显示
如何在固定宽高div内限制多行文本显示，并在超出部分显示省略号？ 本文提供CSS解决方案。
以下代码演示了如何在一个固定宽高的div中，限制文本显示为两行，并在第二行超出时显示省略号：
浮动元素的定位机制 正如前面所述，浮动元素脱离文档流，并向左或向右移动，直到遇到容器边界或其他浮动元素。
.text {
width: 200px;
height: 38px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
这段CSS代码利用了-webkit-box、-webkit-line-clamp和-webkit-box-orient属性。-webkit-line-clamp限制文本显示行数为2；-webkit-box-orient: vertical确保文本垂直排列；overflow: hidden隐藏超出div范围的文本，从而实现省略号效果。 请注意，此方法主要基于webkit内核浏览器（如Chrome、Safari）。 对于其他浏览器，可能需要考虑兼容性方案。
立即学习“前端免费学习笔记（深入）”；
