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

2024-01-10 11:28:08

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来实现类似的效果。

文章来源:https://blog.csdn.net/liyananweb/article/details/135498341
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。