文本超出两行用省略号表示，点击展开方法查看所有以及点击收起方法隐藏

问题:解决文本超出两行用省略号表示，点击展开方法查看所有以及点击收起方法隐藏

方法一：

页面元素

<div style="display:flex;">
  <div style="margin-left:-10px;">内容：</div>
    <div id="content_name" :class="content_name">
      <el-button v-if="showAll" type="text" class="content_show" @click.stop="showContent">展开全部</el-button>
      <el-button v-if="showClose" type="text" class="content_show" @click.stop="hideContent(true)">收起全部</el-button>
      <div @click.stop="hideContent" v-html="abstract" />
  </div>
</div>

样式

.content_obj{
    
    
  white-space: pre-line; // /n字符有效
  position: relative;
}
.content_hidden{
    
    
  white-space: pre-line; 
  position: relative;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  // white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 50px;
}
.content_show{
    
    
  position: absolute;
  right: 0px;
  bottom:0px;
  z-index: 10;
  padding: 5px;
}

js

// 此方法在拿到数据后调用即可
check() {
    
    
  // 判断摘要是否溢出
  const dn = document.getElementById('content_name')
  if (dn.offsetHeight >= 48) {
    
     // 这里的判断条件根据实际情况的高度而定，我这里大于两行就超过48
    dn.className = 'content_hidden'
    this.showAll = true
  }
}
showContent() {
    
    
  const dn = document.getElementById('content_name')
  dn.className = 'content_obj'
  this.showAll = false
  this.showClose = true
},
hideContent(bl) {
    
    
  // 双击内容时或单击按钮有效
  this.db_click++
  setTimeout(() => {
    
    
  	this.db_click = 0
  }, 500)
  if (this.db_click === 2 || bl) {
    
    
    const dn = document.getElementById('content_name')
    dn.className = 'content_hidden'
    this.showAll = true
    this.showClose = false
  }
}

方法二：

样式

.content_obj{
    
    
  white-space: pre-line;
  position: relative;
  height:auto
}
.content_hidden{
    
    
  white-space: pre-line; 
  position: relative;
  // white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 50px;
}
.content_show{
    
    
  position: absolute;
  right: 0px;
  bottom:0px;
  z-index: 10;
  padding: 5px;
}

js

// 此方法在拿到数据后调用即可
check() {
    
    
  // 判断摘要是否溢出
  const dn = document.getElementById('content_name')
  // 有时候高度是会发生变化的
  // 计算元素占几行  高度/行高取整
  const row = Math.round(parseFloat(window.getComputedStyle(dn).height) / parseFloat(window.getComputedStyle(dn).lineHeight))
  // 两行的高度
  const height = (dn.offsetHeight / row)*2  + 'px'
  if (row > 2) {
    
     // 大于两行
    dn.className = 'content_hidden'
    dn.style.height = height
    this.showAll = true
  }
}
showContent() {
    
    
  const dn = document.getElementById('content_name')
  dn.className = 'content_obj'
  this.showAll = false
  this.showClose = true
},
hideContent(bl) {
    
    
  // 双击内容时或单击按钮有效
  this.db_click++
  setTimeout(() => {
    
    
  	this.db_click = 0
  }, 500)
  if (this.db_click === 2 || bl) {
    
    
    const dn = document.getElementById('content_name')
    dn.className = 'content_hidden'
    this.showAll = true
    this.showClose = false
  }
}