css设置第二行超出显示省略号

最新推荐文章于 2024-09-25 19:41:58 发布

天宇流沙

最新推荐文章于 2024-09-25 19:41:58 发布

阅读量1.9k

点赞数

本文链接：https://blog.csdn.net/qq_41792374/article/details/108476644

版权

在这里插入图片描述

 <div class="desc">
            <span class="label-name label-type">【满减卷】</span>
            <span class="font-bold text-dark label-name">哇哇哇哇啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊哇</span>
  </div>

.desc {
  max-width: 3.8rem;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: 14px;
  letter-spacing: 1px;
  line-height: 0.6rem;
}
.label-type {
  color: #ff6b00;
  display: inline-block;
  transform: translate(-7px, 8px);
}
.label-name {
  max-width: 6rem;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #ff6b00;
}