作者
JavaScript 是一种轻量级的脚本语言。所谓“脚本语言”(script language),指的是它不具备开发操作系统的能力,而是只用来编写控制其他大型应用程序(比如浏览器)的“脚本”。 JavaScript 只合适嵌入更大型的应用程序环境,去调用宿主环境提供的底层 API。 目前,已经嵌入 JavaScript 的宿主环境有多种,最常见的环境就是浏览器,另外还有服务器环境,也就是 Node 项目。
目录
如何使用纯css实现文本展开收起的效果
落霞与孤鹜齐飞 7月2日 11 1 0 11 1 0

如何用纯css实现文字展开收起并且自适应滚动的效果,可以结合上一篇文字实现优美滚动条

<section>
    <div class="wrapper">
      <input id="exp1" class="exp" type="checkbox">
      <div class="text">
        <label class="btn" for="exp1"></label>
        JavaScript 是一种轻量级的脚本语言。所谓“脚本语言”(script language),指的是它不具备开发操作系统的能力,而是只用来编写控制其他大型应用程序(比如浏览器)的“脚本”。 JavaScript 只合适嵌入更大型的应用程序环境,去调用宿主环境提供的底层 API。 目前,已经嵌入 JavaScript 的宿主环境有多种,最常见的环境就是浏览器,另外还有服务器环境,也就是 Node 项目。
      </div>
    </div>

    <div class="wrapper">
      <input id="exp2" class="exp" type="checkbox">
      <div class="text">
        <label class="btn" for="exp2"></label>
        所谓“脚本语言”是它不具备开发操作系统的能力的“脚本”。 
      </div>
    </div>

    <div class="wrapper">
      <input id="exp3" class="exp" type="checkbox">
      <div class="text">
        <label class="btn" for="exp3"></label>
        JavaScript 只合适嵌入更大型的应用程序环境,去调用宿主环境提供的底层 API。 目前,已经嵌入 JavaScript 的宿主环境有多种,最常见的环境就是浏览器,另外还有服务器环境,也就是 Node 项目。
      </div>
    </div>
  </section>

已知HTML,实现图中效果,怎么写css?

section {
    width: 400px;
    border: 1px solid #333;
  }


  .wrapper {
    display: flex;
    /* margin: 50px auto; */
    width: 100%;
    /* overflow: hidden; */
    /*   resize: horizontal; */
    border-radius: 8px;
    padding-bottom: 20px;
    border-bottom: 1px solid #000;

  }

  .text {
    font-size: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: justify;
    position: relative;
    line-height: 1.5;
    max-height: 3em;
    transition: .3s max-height;
  }

  .text::before {
    content: '';
    height: calc(100% - 26px);
    float: right;
  }

  .text::after {
    content: '';
    width: 999vw;
    height: 999vw;
    position: absolute;
    box-shadow: inset calc(100px - 999vw) calc(30px - 999vw) 0 0 #fff;
    margin-left: -100px;
  }

  .btn {
    position: relative;
    float: right;
    clear: both;
    margin-left: 20px;
    font-size: 16px;
    padding: 0 8px;
    background: #3F51B5;
    line-height: 24px;
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
    /* margin-top: -30px; */
  }

  .btn::after {
    content: '展开'
  }

  .exp {
    display: none;
  }

  .exp:checked+.text {
    max-height: none;
  }

  .exp:checked+.text::after {
    visibility: hidden;
  }

  .exp:checked+.text .btn::before {
    visibility: hidden;
  }

  .exp:checked+.text .btn::after {
    content: '收起'
  }

  .btn::before {
    content: '...';
    position: absolute;
    left: -5px;
    color: #333;
    transform: translateX(-100%)
  }

要实现动态滚动条加上属性

section {
    min-height: 400px;
    height: 60vh;
    overflow: hidden;
}
section:hover {
    overflow: auto;
}
扫码分享到移动端
0 条评论
快来写一写读后感吧~
参与评论互动
登录即可参与评论互动哦