CSS 多行截断 + 标签

micec9sq
  • 3
新手上路,请多包涵

描述: 标题后面会跟一个Tag标签,标题最长显示两行,超出后就显示 ... ,但是跟在后面的标签不能被隐藏

就像这样

 这是标题[标签]

 这是很长的但还没到需要显示。。。的两行
 标题[标签]

 这是很长很长的需要显示。。。
 的两行标题标题标题...[标签]

有啥方案么,文字多行截断简单,但是后面跟个跟屁虫,这个处理方法没头绪了

回复
阅读 587
4 个回答
✓ 已被采纳

一个不用 line-clamptext-overflow 的通用解法:

html 应该是这样一个结构

<div class='wrapper'>
  <span class='content'>Lorem ipsum dolor sit amet.<span>
  <span class='textOverflow'>...</span>
  <span class='more'>[标签]</span>
</div>

先把 .content 置空,然后一个个地把字符放回去,每放回一个,就检查一次 .wrapper 的高度,这样通过高度的变化,就知道哪个位置会换行了

你知道吗?

宣传栏