css样式两行内容显示省略

最新推荐文章于 2024-08-20 14:07:22 发布

kerelee_li

最新推荐文章于 2024-08-20 14:07:22 发布

阅读量982

点赞数

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

本文链接：https://blog.csdn.net/kerelee_li/article/details/84101566

版权

vue 同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

css

0 篇文章 0 订阅

订阅专栏

css两行内容显示省略

需求是两行内容时，第二行内容超出部分显示为省略号

.li-header-name {
  width 44%;
  overflow hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2; //两行，行数可以自有定义
  -webkit-box-orient: vertical;
}

效果如下：出现了第一行长度大于第二行的现象，显示不够友好
在这里插入图片描述
需要增加属性word-break，优化后如下：

.li-header-name {
  width 44%;
  overflow hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-all;  //增加允许在单词内换行
}

显示效果：
在这里插入图片描述