纯文本内容展开收起（可套用）

舍予一

已于 2022-06-22 09:13:59 修改

阅读量142

点赞数

分类专栏：关于学习、开发中遇到的各种问题 CSS 文章标签： css css3 html

于 2022-06-16 18:04:06 首次发布

本文链接：https://blog.csdn.net/hsy0827/article/details/125320671

版权

关于学习、开发中遇到的各种问题同时被 2 个专栏收录

25 篇文章 1 订阅

订阅专栏

CSS

25 篇文章 0 订阅

订阅专栏

纯文本内容展开收起（可套用）

html

<div class="brief_introduction">
  <input type="checkbox" id="exp" />
  <div class="text">
    <label class="btn" for="exp" ref="btn"></label>
    <p ref="text">
      简介：我是一大段文本我是一大段文本我是一大段文本我是一大段文本我是一大段文本我是一大段文本我是一大段文本我是一大段文本我是一大段文本我是一大段文本我是一大段文本我是一大段文本我是一大段文本我是一大段文本我是一大段文本我是一大段文本我是一大段文本我是一大段文本我是一大段文本我是一大段文本我是一大段文本我是一大段文本我是一大段文本我是一大段文本我是一大段文本我是一大段文本我是一大段文本我是一大段文本我是一大段文本我是一大段文本我是一大段文本我是一大段文本
    </p>
  </div>
</div>

css

  .brief_introduction {
    display: flex;
    font-size: 24px;
    font-weight: 400;
    line-height: 40px;/* 这里是文本行高 */
    color: #999999;
    .text {
      position: relative;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2; /* 这里是超出几行省略 */
      overflow: hidden;
      &:before {
        content: "";
        float: right;
        width: 0;
        height: 100%;
        margin-bottom: -40px;/* 这里是文本行高的负值 */
      }
      .btn {
        float: right;
        clear: both;
        color: #6f717e;
        &:after {
          content: "展开";
          width: 120px;/* 这里是展开/收起部分的宽度（可用来隔开文本与展开/收起)（好像实现不了，待修改） */
          text-align: right;
        }
      }
    }
    #exp {
      display: none;
    }
    #exp:checked + .text {
      -webkit-line-clamp: 999;
    }
    #exp:checked + .text .btn::after {
      content: "收起";
    }
  }

js

//vue2
mounted() {
    // 当文本未超出时，不显示展开、收起
    if (this.$refs.text.scrollHeight == this.$refs.text.clientHeight) {
      this.$refs.btn.style.display = "none";
    }
  },