多行文本溢出

记录多行文本溢出兼容性方法。

HTML代码：

<div class="container">
    <div class="textbox">
      <div class="move">...</div>
      <div class="context">
        Yet in the eyes of the Jade Emperor,the Supreme Deity in Taoism,marriage between a mortal,
        Yet in the eyes of the Jade Emperor,the Supreme Deity in Taoism,marriage between a mortal,
        Yet in the eyes of the Jade Emperor,the Supreme Deity in Taoism,marriage between a mortal,
      </div>
    </div>
  </div>

 CSS样式

  .container {

      width: 400px;
      padding: 20px;
      background-color: #666;
    }


    .move {
      float: right;
      line-height: 1;
    }

    .textbox {
      overflow: hidden;

      background-color: orange;
      height: 100px;
    }

    .textbox::before {
      content: "";
      display: block;
      height: 80px;
      background-color: orange;
    }

    .context {
      line-height: 25px;
      margin-top: -80px;
    }

JS代码

 const content = document.getElementsByClassName("context")[0]
  const move = document.getElementsByClassName("move")[0]
  console.log(content.offsetHeight)
  if (content.offsetHeight < 150) {
    move.style.display = 'none'
  }

效果：