css样式的问题？

Question

需求如下，在文字最后有查看全部和收起的功能

现在是用弹性盒写的，但是这样的话查看全部和收起的字样跟内容分割开了，如何修改可以紧跟在文字后面，我给内容添加::after 不显示，最后一行文字到头了，宽度不够

Answer 1

如果是我实现，我会给这段文字加一个状态，用js控制。当其为收起状态时，在文字后面加个
<span>查看全部</span>,当其为展开状态时，隐藏查看全部，加个<span>收起</span>。

Answer 2

内容部分为一个子 flex DIV
然后内容部分假设用 P 包裹，然后 查看更多 用 SPAN 包裹
现在给 P 标签加上自动截取字符串样式，类似

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
word-break: break-all;
overflow: hidden;

现在通过给最外层 DIV 两个状态，来控制是否应用截取样式就好了，大抵如

<div class='is-elip'>
<p>内容…</p>
<span>查看更多</span>
</div>

<style>
.is-elip p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  word-break: break-all;
  overflow: hidden;
}
</style>

Answer 3

可以参考这篇文章，对你或许有帮助 CSS 实现多行文本“展开收起”