CSS 多行截断 + 标签

Question

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

就像这样

 这是标题[标签]

---

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

---

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

---

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

Answer 1

这个demo应该可以满足你的需求 https://codepen.io/xboxyan/pe...

原理可以参考这篇文章 https://segmentfault.com/a/11...

Answer 2

一个不用 line-clamp 或 text-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 的高度，这样通过高度的变化，就知道哪个位置会换行了

Answer 3

已经有人回答了参考链接，其实站内就有，@XboxYan 的文章
https://segmentfault.com/a/11...
在此基础上加上一点点就行，因为原文是展开收起，不超出是不展示按钮，那么你可以默认加上去即可
https://jsbin.com/gedogaguce/...,output

Answer 4

可以看看这个，https://mp.weixin.qq.com/s/li...