巧用CSS实现固定大小Div中多行文本的省略号显示
如何在固定宽高div内限制多行文本显示，并在超出部分显示省略号？ 本文提供CSS解决方案。
以下代码演示了如何在一个固定宽高的div中，限制文本显示为两行，并在第二行超出时显示省略号：
<code class="html"><div class="text"> 浮动元素的定位机制 正如前面所述，浮动元素脱离文档流，并向左或向右移动，直到遇到容器边界或其他浮动元素。 </div></code>
<code class="css">.text {
width: 200px;
height: 38px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}</code>这段CSS代码利用了-webkit-box、-webkit-line-clamp和-webkit-box-orient属性。-webkit-line-clamp限制文本显示行数为2；-webkit-box-orient: vertical确保文本垂直排列；overflow: hidden隐藏超出div范围的文本，从而实现省略号效果。 请注意，此方法主要基于webkit内核浏览器（如Chrome、Safari）。 对于其他浏览器，可能需要考虑兼容性方案。
立即学习“前端免费学习笔记（深入）”；
以上就是如何用CSS限制多行文本在固定大小Div中显示并显示省略号？的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
845
收藏
