多行省略，省略号后加展开收起文字

最新推荐文章于 2024-05-08 10:42:17 发布

疯糖

最新推荐文章于 2024-05-08 10:42:17 发布

阅读量1.1k

点赞数 1

分类专栏： js vue模块 css 文章标签： css css3

本文链接：https://blog.csdn.net/Cynthia_Yue27/article/details/125981189

版权

vue模块同时被 3 个专栏收录

23 篇文章 0 订阅

订阅专栏

9 篇文章 1 订阅

订阅专栏

css

2 篇文章 0 订阅

订阅专栏

1. 原生js实现

效果图：
在这里插入图片描述

第一div.ellitext_fake展示第一行的完整内容，通过定位z-index及增加背景图遮盖后边内容
第二个div.ellitext_first拼接成带省略号的文本，根据需要看右侧需要留几个字的位置，如上图需要空4个字的位置。则增加： padding-right: 4em; text-indent: -4em;及多行省略代码
第三个div.ellitext_real是完整的文本内容

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .ellitext_outer {
      text-align: left;
      font-size: 14px;
      line-height: 1.4;
      word-break: break-all;
      background-color: #ccc;
      padding: 0.8rem;
    }
    .ellitext_box {
      position: relative;
    }
    .ellitext_content {
      max-height: 2.8em;
      overflow: hidden;
    }
    .ellitext_first{
      padding-right: 4em;
      text-indent: -4em;
      white-space: pre-wrap;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      text-align: justify;
    }
    .ellitext_fake{
      position: absolute;
      white-space: pre-wrap;
      top: 0;
      left: 0;
      z-index: 1;
      background-color: #ccc;
      max-height: 1.4em;
      overflow: hidden;
      text-align: justify;
    }
    .ellitext_fake_text {
      position: absolute;
      top: 1.4em;
      right: 0;
      z-index: 100;
      color: blue;
    }
    .ellitext_realbox{
      position: unset;
      top: -1.4em;
      left: 0;
    }
    .ellitext_real{
      white-space: pre-wrap;
      padding-right: 0;
      text-indent: 0;
      text-align: justify;
    }
    .displayNo {
      display: none;
    }
    .displayBlock {
      display: block;
    }
  </style>
</head>
<body>
  <!-- 页面更改比例后，需要刷新下页面 -->
  <div>
    <div class="ellitext_outer" onclick="setHideText()">
      <div class="ellitext_box">
        <div class="ellitext_first"></div>
        <div class="ellitext_fake"></div>
        <div class="ellitext_fake_text">【详情】</div>
        <div class="ellitext_realbox">
          <div class="ellitext_real"></div>
        </div>
      </div>
    </div>

  </div>
</body>
<script>
  var isHideContent = true
  var ellitext_box = document.getElementsByClassName("ellitext_box")[0]
  var ellitext_first = document.getElementsByClassName("ellitext_first")[0]
  var ellitext_fake = document.getElementsByClassName("ellitext_fake")[0]  
  var ellitext_fake_text = document.getElementsByClassName("ellitext_fake_text")[0]  
  var ellitext_realbox = document.getElementsByClassName("ellitext_realbox")[0] 
  var ellitext_real = document.getElementsByClassName("ellitext_real")[0]  
  var text = "大兴区全区所有人员原则上禁止离京，如需出京，按照“谁审批谁负责”的原则，持3日内核酸检测阴性证明。自6月6日起，除丰台区全域及昌平区部分区域外，全市其他地区进一步分区分级动态实施。"
  ellitext_first.innerHTML = text
  ellitext_fake.innerHTML = text
  ellitext_real.innerHTML = text
  
  addOrRemoveClass()
  
  
  // 是否展示“详情”按钮
  if (ellitext_first.scrollHeight > ellitext_first.offsetHeight) {
    // 
  } else {
    ellitext_fake_text.style.display = 'none'
  }


  function setHideText () {
    isHideContent = !isHideContent
    addOrRemoveClass()
  }
  function addOrRemoveClass() {
    if (isHideContent) {
      ellitext_box.classList.add('ellitext_content')
      ellitext_first.classList.remove('displayNo')
      ellitext_fake.classList.remove('displayNo')
      ellitext_fake_text.classList.remove('displayNo')
      ellitext_realbox.classList.add('displayNo')
    } else {
      ellitext_box.classList.remove('ellitext_content')
      ellitext_first.classList.add('displayNo')
      ellitext_fake.classList.add('displayNo')
      ellitext_fake_text.classList.add('displayNo')
      ellitext_realbox.classList.remove('displayNo')
    }
  }
</script>
</html>

2. vue 中实现：

在这里插入图片描述

<template>
  <div class="list-content-wrap">
    <ul class="list-content">
      <li class="item-wrap"
          v-for="(goods, index) in filterList"
          :key="goods.goodsCode">
        <div>
          <p class="item-name">{{goods.goodsName}}</p>
          <div class="ellitext_outer">
            <div class="ellitext_box" :class="{'ellitext_content':!goods.isHideContent}">
              <div class="ellitext_first" :ref="setElliTestRefArr" v-show="!goods.isHideContent">{{goods.goodsDesc}}</div>
              <div class="ellitext_fake" v-show="!goods.isHideContent">{{goods.goodsDesc}}</div>
              <img @click.stop="setHideText(goods, index)" v-if="goods.isShowDescArrow" class="text-arrow" :src="goods.isHideContent ? iconUpImg : iconDownImg" />
              <div class="ellitext_realbox" v-show="goods.isHideContent">
                <div class="ellitext_real">{{goods.goodsDesc}}</div>
              </div>
            </div>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
import iconDownImg from '@/assets/img/plan-data/icon_down.png'
import iconUpImg from '@/assets/img/plan-data/icon_up.png'
import { onMounted, reactive, onBeforeUpdate, toRefs } from 'vue'
export default {
  setup (props) {
    const state = reactive({
      elliTestRefArr: [],
      filterList: [
        { goodsName: '名称1', goodsDesc: '我是详情；我是详情；我是详情；我是详情；我是详情；我是详情；我是详情；我是详情；我是详情；我是详情；我是详情；我是详情；我是详情；我是详情；我是详情；我是详情；我是详情；我是详情；我是详情；我是详情；我是详情；我是详情；我是详情；我是详情；我是详情；' }
      ]
    })

    const setElliTestRefArr = (r) => {
      if (!r) return
      state.elliTestRefArr.push(r)
    }

    onBeforeUpdate(() => {
      state.elliTestRefArr = []
    })
    onMounted(() => {
      setTimeout(() => {
        state.elliTestRefArr.forEach((el, index) => {
          state.filterList[index].isShowDescArrow = el.scrollHeight > el.offsetHeight
        })
      }, 200)
    })

    function setHideText (goods) {
      goods.isHideContent = !goods.isHideContent
    }
    return {
      ...toRefs(state),
      setElliTestRefArr,
      setHideText,
      iconDownImg,
      iconUpImg
    }
  }
}
</script>
<style lang="stylus" scoped>
.ellitext_outer {
  text-align: left;
  word-break: break-all;
  background-color: #FFF;
  color: #999;
  font-size: .24rem;
  margin-top: .26rem;
  line-height: .4rem;
  position: relative;
}
.ellitext_box {
  position: relative;
}
.ellitext_content {
  max-height: 4em;
  overflow: hidden;
}
.ellitext_first{
  padding-right: 1em;
  text-indent: -1em;
  white-space: pre-wrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-align: justify;
}
.ellitext_fake{
  position: absolute;
  white-space: pre-wrap;
  top: 0;
  left: 0;
  z-index: 1;
  max-height: 1.4em;
  overflow: hidden;
  text-align: justify;
  background: #fff;
}
.text-arrow {
  width: .2rem;
  height: .1rem;
  position: absolute;
  bottom: .5em;
  right: 0;
  z-index: 100;
  color: blue;
}
.ellitext_realbox{
  position: unset;
  top: -1.4em;
  left: 0;
}
.ellitext_real{
  white-space: pre-wrap;
  padding-right: 0;
  text-indent: 0;
  text-align: justify;
}
.displayNo {
  display: none;
}
.displayBlock {
  display: block;
}
.list-content-wrap {
  margin-top: .02rem;
  .list-content {
    background: #fff;
    padding-top: .2rem;
  }
  .item-wrap {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: .3rem .26rem;
    &:not(:first-of-type) {
      position relative
      &::before {
        content: '';
        display: block;
        background: #f5f5f5;
        height: .02rem;
        width: 93%;
        position: absolute;
        top: 0;
      }
    }
    .item-img {
      height: 1.4rem;
      width: 1.4rem;
      margin-right: .26rem;
      $radius(.1rem);
    }
    .item-name {
      font-size: .32rem;
      font-weight: bold;
      color: #333333;
    }
  }
}
</style>