css 多行省略的几种写法

<style>
      .box {
        display: block;
        /* display:inline-block; */
        width: 100px;
        /* 一行start */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: break-all;
        /* 一行end */
        color: red;
      }
      .desc {
        /* 正确 */
        color: blue;
        display: inline; /* ellipsis只对inline生效 */
        /* 错误，b标签里的字超出不能显示省略号（...） */
        /* display:inline-block; */
      }
      /* 英文是不会自动换行 */
      /* 让英文自动换行 */
      .box2 {
        background: yellow;
        width: 300px;
        word-wrap: break-word;
        word-break: break-all;
      }
      .box3 {
        /* 该方法适用于WebKit浏览器及移动端 */
        /* 多行start */
        background: cyan;
        width: 300px;
        overflow: hidden;
        text-overflow: ellipsis;
        text-overflow: -o-ellipsis-lastline;
        display: -webkit-box;
        -webkit-line-clamp: 3; /* 块元素显示的文本的行数 */
        line-clamp: 3;
        /* 此属性不生效 */
        -webkit-box-orient: vertical; /* 设置或检索伸缩盒对象的子元素的排列方式 ,盒子行数根据高度来计算 */
        overflow-wrap: break-word; /* 设置div换行 */
        /* 多行end */
      }

      .box4 {
        /* 该方法适用范围广，但文字未超出行的情况下也会出现省略号,可结合js优化该方法 */
        /* 由于ie6-7不显示content内容，所以要添加标签兼容ie6-7（如：<span>…<span/>）；*/
        /* 兼容ie8需要将::after替换成:after  */
        /* 多行start */
        /* background: cyan; */
        width: 300px;
        position: relative;
        line-height: 20px;
        /* 多行end */
      }
      .overflow {
        max-height: 40px;
        overflow: hidden;
      }
      .overflow::after,
      .overflow:after {
        content: "...";
        position: absolute;
        bottom: 0;
        right: 0;
        padding-left: 40px;
        background: -webkit-linear-gradient(left, transparent, #fff 55%);
        background: -o-linear-gradient(right, transparent, #fff 55%);
        background: -moz-linear-gradient(right, transparent, #fff 55%);
        background: linear-gradient(to right, transparent, #fff 55%);
      }
    </style>

<span class="box"
      >想起从前呆在南方/许多那里的气息 许多那里的颜色/不知觉心已经轻轻飞起
      <b class="desc"
        >我第一次恋爱在那里/不知她现在怎么样 我家门前的湖边/这时谁还在流连</b
      >时间过得飞快/转眼这些已成回忆 每天都有新的问题/不知何时又会再忆起</span
    >
    <br>
    <div class="box2">
      It's always wet / soft there There's always a lot of trivia there / it's
      always red and blue So romantic every day
    </div>
    <br />
    <div class="box3">
      我第一次恋爱在那里/不知她现在怎么样 我家门前的湖边/这时谁还在流连 It's
      always wet / soft there There's always a lot of trivia there / it's always
      red and blue So romantic every day时间过得飞快/转眼这些已成回忆
      每天都有新的问题/不知何时又会再忆起
    </div>

    <br />
    <div class="box4 multi-line">
      我第一次恋爱在那里/不知她现在怎么样 我家门前的湖边/这时谁还在流连 It's
      always wet / soft there There's always a lot of trivia there / it's always
      red and blue So romantic every day时间过得飞快/转眼这些已成回忆
      每天都有新的问题/不知何时又会再忆起
    </div>
    <br />
    <div class="box4 multi-line">我第一次恋爱在那里/不知她现在怎么样</div>
    <br />
    <div class="box5">我第一次恋爱在那里 时间过得飞快 转眼这些已成回忆 每天都有新的问题 不知何时又会再忆起</div>

      // 获取元素class里面的样式
      function getStyle(obj, attr) {
        var ie = !+"\v1"; //简单判断ie6~8
        if (attr == "backgroundPosition") {
          //IE6~8不兼容backgroundPosition写法，识别backgroundPositionX/Y
          if (ie) {
            return (
              obj.currentStyle.backgroundPositionX +
              " " +
              obj.currentStyle.backgroundPositionY
            );
          }
        }
        if (obj.currentStyle) {
          return obj.currentStyle[attr];
        } else {
          return document.defaultView.getComputedStyle(obj, null)[attr];
        }
      }
      /* @function 多行省略
       * @param cls class名
       * @param h 多高省略
       * @param overflow 可以是已经备好的样式,也可以是自定义
       */
      function multiLine(cls, h, overflow = 'overflow') {
        let lines = document.querySelectorAll(cls);
        lines.forEach(item => {
          let ch = Number(getStyle(item, 'height').replace('px',''))
          if(ch>h) { // 高出设置的高度则隐藏下面的内容,并出现省略号
            item.classList.add('overflow')
          }
        })
      }
      multiLine('.multi-line', 40)
      /* @function 多行省略
       * @param cls class名
       * @param num 多少字切割显示省略号
       * @param dot 省略号的符号
       */
      // 只支持中文省略号,不支持混合
      function multiLine2(cls, num, dot = '...') {
        let lines = document.querySelectorAll('.box5')
        lines.forEach(item => {
          let bt = item.textContent
          let l = bt.replace(/\s\s+/g, ' ').trim().length // 去除文字中的多余的空格,和前后的空格
          console.log(l)
          if(l > num) {
            item.textContent = bt.substr(0, num) + dot
          }
        })
      }
      multiLine2('.box5', 40)