首页 前端知识 css---实现文本超过两行时显示省略号(...)的效果

css---实现文本超过两行时显示省略号(...)的效果

2024-02-22 10:02:19 前端知识 前端哥 741 448 我要收藏

可以使用CSS中的text-overflow属性配合-webkit-line-clamp属性来实现。以下是一种常见的方式:

.text-container {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 设置最大显示行数 */
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}

在上面的示例中,.text-container 是包裹文本内容的容器元素的类名。通过设置 display: -webkit-box; -webkit-line-clamp: 2;,我们将容器元素设置为仅显示两行文本。当文本超过两行时,将隐藏溢出部分,并通过text-overflow: ellipsis;显示省略号。

请注意,-webkit-line-clamp 是一个非标准的CSS属性,仅在WebKit浏览器上有效。
如果需要兼容其他浏览器,可以考虑使用JavaScript或其他CSS技术来实现类似的效果。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/2448.html
标签
评论
发布的文章

jQuery中的ajax

2024-03-07 08:03:42

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!