div内包括多行文本+图片溢出显示省略号进行收缩展开，要如何实现？（非纯文本的情况，v-html渲染）

Question

比如我需要超过8行的文字就溢出省略号显示

文本末尾显示 展开或 收起 按钮

一开始p标签内的纯文本的形式我是采用下面css代码实现的

<p>{{ item.content }}</p>

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 8;
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;

效果如图

但目前有个需求就是，以上的内容可能包括文本样式甚至图片，所以改成了用v-html来渲染文本内容

<p
    class="paragraph"
    :class="{ ellipsis_lines6: item.isFold }"
    ref="txt"
    v-html="item.content"
    @click="switchFold(isTop, index, $event)"
    ></p>

目前传来的文本内容可能有以下

<p>
  1月5日，商务部等12部门印发《商务部等12部门印发《关于提振大宗消费重点消费促进释放农村消费潜力若干措施的通知》。提出五个方面工作任务：<strong>一是稳定和扩大汽车消费；二是促进家电家具家装消费；三是提振餐饮消费；四是补齐农村消费短板弱项；五是强化政策保障。</strong>显而易见，汽车特别时新能源汽车，家电，餐饮消费像酒类饭店等，物流尤其是农产品物流，将迎来一连串政策利好。这也就印证了，之前食品饮料、家电、新能源涨势虹的行情。
</p>
<p>
  【1】站在好赛道了，若没上对班次，是不是更遗憾？有股市投资经验的民众不难注意到，从2017年以来，A股市场大盘股、价高股涨幅已经远远超过中小盘股。与其说是资金抱团大市值安全标，不如说行业题材的龙头股才是长期投资的方向。
</p>
<p>
  【2】结合当下涨势靠前的新能源、国防、智能制造、芯片、电子板块，市场再次告诉我们民众：<strong
    ><span style="color: rgb(0, 0, 0)"
      >一、每一轮A股好行情均由符合当下国家经济转型的板块带动，</span
    ></strong
  >本次行情重点在新能源汽车产业连，国家智造板块，芯片电子、5G通信板块的政策扶持下。<strong>二、行情动力源的板块一定是有高成长性的预期</strong>，高成长性来自上市公司能够自主产生高收益和现金流（食品饮料的酒），以及市场对其乐观且狂热的估值情绪（芯片、5G通信板块）。因此，我们非常有理由看好2021年A股行情的演化。
</p>
<p>
  【3】临近尾盘，说说今天行情。资金持续推进的新能源板块、芯片、5G通信、电气设备等政策扶持的核心板块暂时停止了连日的上涨，停一停，或许是为了走的更远。我们持续对这些方向看好。前几日因政策打压持续下跌的银行、房地产、建材板块出现了小幅反弹，后续走势还待观察。我们建议，若关注受国家扶持的好赛道，不要抱着辉煌已成过去的板块不放。
</p>
<p>
  【4】附件1是智胜给出的可视化大盘云图，清晰明了地全览大盘；附件2是主力资金流向监控图，医药、银行、建筑成为今天主力流入的主方向。海螺水泥、中国中车、天齐锂业（相比赣锋锂业大概率在补涨）、招商银行（这是典型的超跌反弹行情）成为今天资金追捧的标的。
</p>
<p>
  <img
    src="https://up0.z3quant.com/z3upload/static/edu/image/20210106/1609923294114006174.png"
    title="1609923294114006174.png"
    alt="image.png"
  />
</p>

但这个时候标题所需要的效果继续沿用一开始的css代码的话，无法成功收缩为8行，且整个乱掉

请问针对这种类富文本的形式，要如何实现一开始纯文本的类似效果呢？

Answer 1

let p = document.createElement("p");
    p.innerHTML = this.content;
    console.log(p.innerText);

这个p.innerText就能获取到这个内容的纯文本。