【css技巧】文本超出两行显示省略号

ChatGPT4.0国内站点：海鲸AI

你可以使用CSS的-webkit-line-clamp属性来实现文本超出两行显示省略号的效果。示例代码如下：

.text-container {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2; /* 控制显示的行数 */
}

然后在HTML中使用这个类来包裹需要实现这个效果的文本元素：

<div class="text-container">
  <!-- 这里放需要实现效果的文本 -->
</div>

注意，-webkit-line-clamp是一个WebKit浏览器的私有属性，因此它可能不被所有浏览器支持。如果需要兼容多种浏览器，你可能需要考虑使用JavaScript来实现类似的效果。