CSS 多行截断 + 标签

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

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

就像这样

 这是标题[标签]

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

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

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

回复
阅读 301
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 的高度,这样通过高度的变化,就知道哪个位置会换行了

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏