css - 单行文本与多行文本溢出显示...

最新推荐文章于 2024-08-26 01:16:20 发布

瓜了个瓜~

最新推荐文章于 2024-08-26 01:16:20 发布

阅读量138

点赞数

CC 4.0 BY-SA版权

分类专栏： css 文章标签： css

本文链接：https://blog.youkuaiyun.com/weixin_41941159/article/details/103679478

css 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何使用CSS实现多行文本溢出时，在最后一行显示省略号的方法。通过设置display:-webkit-box; -webkit-line-clamp:3; 和-webkit-box-orient:vertical;等属性，可以实现在指定行数后自动添加省略号的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

   大家应该都知道用`text-overflow:ellipsis`属性来实现单行文本的溢出显示省略号(…)。
   当然部分浏览器还需要加宽度width属性。
   
   单行文本溢出显示省略号：
   css： 
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
   
   但是这个属性并不支持多行文本溢出显示省略号；那多行文本溢出如何显示省略号呢？
   多行文本溢出，最后一行显示省略号：
   css:
   	      overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 3;  /* 多行文本的行数  3 - 表示三行文本超出后在第三行后显示（...） */
          -webkit-box-orient: vertical;/* 比较适用于webkit浏览器及移动端浏览器（不兼容） */