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

css设置第二行超出显示省略号_第1张图片

 <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;
}

你可能感兴趣的:(css设置第二行超出显示省略号)