固定宽高div中，第二行文本超出显示省略号的CSS技巧
网页设计中，经常需要在固定尺寸的div容器内显示文本，并控制文本行数，超出部分以省略号显示。本文介绍一种高效的CSS方法实现此效果。
问题描述：在一个固定宽度和高度的div中，如何确保文本最多显示两行，超过两行则以省略号结尾？
解决方案：利用CSS的display: -webkit-box、-webkit-line-clamp、-webkit-box-orient和overflow属性组合实现。
示例代码：
浮动元素是如何定位的？正如我们前面提到的那样，当一个元素浮动之后，它会被移出正常的文档流，然后向左或者向右平移，一直平移直到碰到了所处的容器的边框，或者碰到另外一个浮动的元素。
.text-container {
width: 200px;
height: 38px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
代码解释：
-
display: -webkit-box;: 将元素设置为WebKit盒模型。这是实现-webkit-line-clamp的关键。 -
-webkit-line-clamp: 2;: 限制文本显示的行数为2行。 -
-webkit-box-orient: vertical;: 设置文本垂直排列。 -
overflow: hidden;: 隐藏超出容器的内容，从而实现省略号效果。
通过以上CSS代码，即可轻松实现固定宽高div中，第二行文本超出时显示省略号的功能，满足常见的UI设计需求。 需要注意的是，-webkit-前缀表示该属性是WebKit浏览器专有属性，兼容性方面需要额外考虑，可能需要添加其他浏览器前缀，或使用更通用的解决方案。
