当文字内容过多的时候，想要点击更多，展示全部内容

最新推荐文章于 2024-07-24 10:40:52 发布

白拜拜_

最新推荐文章于 2024-07-24 10:40:52 发布

阅读量312

点赞数 1

文章标签：前端 javascript java

本文链接：https://blog.csdn.net/xiguaxixixi/article/details/132146141

版权

首先先看成品样式

点开前

点开后

这里的内容是富文本，我用v-html 写到页面上的，

富文本的长度

这里的value是获取到的富文本

richTextFormat(value, index) {
      value = value.replace(/<\/?.+?>/g, "");
      value = value.replace(/\s+/g, "");
      console.log("value.length", value.length);
       if(value.length>100){
        this.isLengthThree=true
      }
}

<div :class="isLengthThree ? 'more_text' : 'after-text-show'"
     v-html="isLengthThree ? helpInfo : helpType"
     @click="isLengthThree = false"
></div>

css样式

.more_text {
    width: 80%;
    height: 100%;
    letter-spacing: 2px;
    line-height: 40px;
    margin: 0 auto;
    font-size: calc(100vw * 14 / 1920);
    font-family: "KaiTi";
    pointer-events: none;
  }
  /deep/.more_text::after {
    content: "更多>>" !important;
    color: blue;
    width: auto !important;
    font-size: calc(100vw * 14 / 1920) !important;
    height: 80px !important;
    display: inline-block;
    position: relative;
    pointer-events: auto;
  }
    .after-text-show {
    width: 80%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 30px;
    padding-top: 20px;
    padding-bottom: 40px;
    font-size: calc(100vw * 14 / 1920);
    letter-spacing: 2px;
  }