实现多行文本溢出自定义省略符，以及展开和收起

最新推荐文章于 2024-03-13 20:32:49 发布

Headmaster_Tan

最新推荐文章于 2024-03-13 20:32:49 发布

阅读量498

点赞数

分类专栏： CSS JavaScript 文章标签： javascript css

本文链接：https://blog.csdn.net/Headmaster_Tan/article/details/124411833

版权

参考自：https://juejin.cn/post/6979043372233621518

没有废话只有代码（参考文章说的很明白了），即拷即用

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Document</title>
    <style>
      .box {
     
        position: relative;
        margin: 50px;
        width: 200px;
        max-height: 60px;
        overflow: hidden;
      }
      .no__ellipsis {
     
        position: relative;
        margin: 50px;
        width: 200px;
      }
      .box__text {
     
        position: relative;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        font-size: 60px;
        line-height: 0;
        letter-spacing: 0;
        color: transparent;
        text-align: justify;
      }
      .box__text__no__ellipsis {
     
        position: relative;
        font-size: 16px;
        color: transparent;
        text-align: justify;
      }
      .box__inner {
     
        font-size: 16px;
        line-height: 20px;
        color: #000;
        vertical-align: top;
        letter-spacing: 0;
        display: inline;
      }
      .text__inline {
     
        margin-right: 10px;
      }
      .box__abs {
     
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }
      .box__fake-text {
     
        width: 100%;
        margin-left: -60px;
        line-height: 20px;
        float: right;
        color: transparent;
      }
      .box__placeholder {
     
        width: 60px;
        height: 60px;
        float: right;
        opacity: 0.5;
      }
      .box__more {
     <

最低0.47元/天解锁文章

Headmaster_Tan

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
实现多行文本溢出自定义省略符，以及展开和收起

参考自：https://juejin.cn/post/6979043372233621518没有废话只有代码（参考文章说的很明白了），即拷即用<!DOCTYPE html><html lang="en"> <head> <title>Document</title> <style> .box { position: relative; margin: 50px;
复制链接

扫一扫