本文介绍如何在一个固定宽高div中，控制第二行文本超出部分显示省略号(...)，解决常见的布局问题。
假设一个div，宽度200像素，高度38像素，包含多行文本。当文本超过div高度时，需要在第二行末尾显示省略号。
使用CSS属性实现该效果，以下代码示例：
<div class="text"> 浮动元素的定位机制 正如前面所述，浮动元素脱离文档流，向左或向右移动，直至遇到容器边界或其他浮动元素。 </div>
.text {
width: 200px;
height: 38px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}代码解释：
display: -webkit-box;: 启用WebKit盒模型。-webkit-line-clamp: 2;: 限制文本显示为两行。-webkit-box-orient: vertical;: 设置盒子元素垂直排列。overflow: hidden;: 隐藏溢出内容。此方法主要兼容WebKit内核浏览器（Chrome、Safari等）。 对于其他浏览器，可能需要考虑使用JavaScript或其他CSS技巧来实现兼容性。
希望以上方案能帮助您解决类似问题。
以上就是如何在固定宽高div中让第二行文本超出时显示省略号？的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
752
收藏
