如何在固定宽高div中让第二行文本超出时显示省略号？

本文介绍如何在固定宽高(200px*38px)的div中，使超出第二行的文本显示省略号(...)。 通过CSS属性`display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;` 可以有效实现该效果，该方法主要兼容Chrome和Safari等WebKit内核浏览器。文章将详细解释代码及兼容性问题，帮助您解决div文本溢出显示问题，提升页面布局美观度。

固定高度div中，控制第二行文本溢出显示省略号

本文介绍如何在一个固定宽高div中，控制第二行文本超出部分显示省略号(...)，解决常见的布局问题。

问题场景

假设一个div，宽度200像素，高度38像素，包含多行文本。当文本超过div高度时，需要在第二行末尾显示省略号。

CSS解决方案

使用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中让第二行文本超出时显示省略号？》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！