最多显示2行文字,多余的省略显示。

最新推荐文章于 2025-07-19 15:06:59 发布

圆周率呀

最新推荐文章于 2025-07-19 15:06:59 发布

阅读量1.2w

点赞数 5

CC 4.0 BY-SA版权

分类专栏： html5/css3 vue2 文章标签：前端 css html

本文链接：https://blog.youkuaiyun.com/qq_43532275/article/details/129024124

vue2 同时被 2 个专栏收录

26 篇文章

订阅专栏

html5/css3

8 篇文章

订阅专栏

通过CSS的overflow:hidden,text-overflow:ellipsis和line-clamp属性，可以限制文本显示为两行并自动添加省略号。设置word-break:break-all确保换行处理，同时指定line-height和max-height以控制高度。

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

前端在 CSS 中最多显示 2 行文字，可以使用 overflow: hidden 和 text-overflow: ellipsis 属性，并设置一个高度限制。

例如：

.box { 
    overflow: hidden;
    text-overflow: ellipsis;
  // 只要超过宽度就换行，不论中文还是英文
    word-break: break-all;
 //最多展示两行
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
//根据样式设置
    line-height: 1.2em;
    max-height: 2.4em;
}

这样，如果文本需要更多的行数才能完全显示，则会省略多余的文本并在末尾显示省略号（...）。