网页设计中，经常需要在固定尺寸的div容器内显示文本，并控制文本行数，超出部分以省略号显示。本文介绍一种高效的CSS方法实现此效果。
问题描述：在一个固定宽度和高度的div中，如何确保文本最多显示两行，超过两行则以省略号结尾？
解决方案：利用CSS的display: -webkit-box、-webkit-line-clamp、-webkit-box-orient和overflow属性组合实现。
示例代码：
<div class="text-container"> 浮动元素是如何定位的？正如我们前面提到的那样，当一个元素浮动之后，它会被移出正常的文档流，然后向左或者向右平移，一直平移直到碰到了所处的容器的边框，或者碰到另外一个浮动的元素。 </div>
.text-container {
width: 200px;
height: 38px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}代码解释：
通过以上CSS代码，即可轻松实现固定宽高div中，第二行文本超出时显示省略号的功能，满足常见的UI设计需求。 需要注意的是，-webkit-前缀表示该属性是WebKit浏览器专有属性，兼容性方面需要额外考虑，可能需要添加其他浏览器前缀，或使用更通用的解决方案。
以上就是如何在固定宽高的div中实现第二行超出时显示省略号？的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
789
收藏
