如何在固定宽高的div中实现文本超出第二行时的省略号显示效果？-css教程-PHP中文网

如何在固定宽高的div中实现文本超出第二行时的省略号显示效果？

聖光之護

发布： 2025-03-20 10:46:11

原创

1051人浏览过

如何在固定宽高的div中实现文本超出第二行时的省略号显示效果？

前端开发中，经常需要在固定尺寸的div内显示文本，而当文本超过div大小，特别是超出第二行时，如何优雅地处理溢出内容是一个常见挑战。本文将介绍一种方法，让超出第二行的文本以省略号（...）结尾。

问题：假设有一个固定宽度和高度的div，需要在其中显示一段文字。当文字超过两行时，如何只显示前两行，并在末尾添加省略号？

解决方案：利用CSS的display: -webkit-box、-webkit-line-clamp、-webkit-box-orient和overflow属性组合实现。

示例代码：

ViiTor实时翻译

AI实时多语言翻译专家！强大的语音识别、AR翻译功能。

116

<div class="text">
  浮动元素是如何定位的？正如我们前面提到的那样，当一个元素浮动之后，它会被移出正常的文档流，然后向左或者向右平移，一直平移直到碰到了所处的容器的边框，或者碰到另外一个浮动的元素。
</div>

登录后复制

.text {
  width: 200px;
  height: 38px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

登录后复制

代码解释：

这种方法在Chrome和Safari等WebKit内核浏览器中效果最佳。对于其他浏览器，可能需要考虑使用JavaScript或其他CSS技巧来实现兼容性。

以上就是如何在固定宽高的div中实现文本超出第二行时的省略号显示效果？的详细内容，更多请关注php中文网其它相关文章！

大家都在看：