文本超出后的展开/收起操作

效果展示：

1. html部分

<div class="lineHistoryText">
// 文本
     <span span class="lineColor">历史记录：</span>
      <ul id="content" class="content">
        <li
          class="processText"
          v-for="(item, index) in people.process"
          :key="index"
        >
          {{ item }}
        </li>
      </ul>
      // 展开、收起
      <div id="more" class="more">
        <div id="fold" class="fold" @click="showUp()">展开</div>
      </div>
 </div>

2.js部分

// 展开||收起
   methods: {
	    showUp() {
	      let content = document.getElementById("content");
	      let fold = document.getElementById("fold");
	      let topContent = document.getElementById("topContent")
	      if (this.folding) {
	        content.classList.add("all_text");
	        this.foldText = "收起";
	        topContent.style.height = "2.2rem"
	      } else {
	        content.classList.remove("all_text");
	        this.foldText = "展开";
	        topContent.style.height = "1.5rem"
	      }
	      this.folding = !this.folding;
	      fold.innerText = this.foldText;
	    },
   },
    async mounted(){
    	let more = document.getElementById("more");
	    let res = await queryByPrewarningUuid({
	      prewarningUuid: this.$base.getLocalStorage("prewarningUuid")
	    });
	    if (res.result.process && res.result.process.length >= 4) {
	      more.style.display = "block";
	    } else {
	      more.style.display = "none";
	    }
    }

3.css部分

.historyContentText {
    min-width: 4rem;
    min-height: 1.5rem;
    float: left;
    .lineHistoryText {
      font-size: 0.18rem;
      .content {
        width: 100%;
        position: relative;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        .processText {
          line-height: 0.22rem;
        }
      }
      // 用于js动态添加类名，覆盖样式,出现此样式名时，则不出现省略号和展开按钮 
      .all_text {
        -webkit-line-clamp: inherit;
      }
      .more {
        box-sizing: border-box;
        position: absolute;
        font-size: 0.16rem;
        z-index: 1000;
      }
      // 省略号
      .ellipsis {
        float: left;
      }
      // 展开收起按钮 
      .fold {
        float: right;
        cursor: pointer;
        color: #409eff;
      }