js:判断元素超出隐藏overflow:hidden生效

文档:

clientWidth: https://developer.mozilla.org/zh-CN/docs/Web/API/Element/clientWidth

scrollWidth: https://developer.mozilla.org/zh-CN/docs/Web/API/element/scrollWidth

offsetWidth: https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement/offsetWidth

通过元素的属性:clientWidth/clientHeight 和 scrollWidth/scrollHeight 来判断元素是否有超出隐藏部分

如果有超出隐藏部分,就会出现 client < scroll

有以下情况:

  1. 如果元素没有超出隐藏
clientWidth==scrollWidth && clientHeight == scrollHeight

如果元素横向超出隐藏

clientWidth < scrollWidth && clientHeight == scrollHeight

如果元素纵向超出隐藏

clientWidth == scrollWidth && clientHeight < scrollHeight

js:判断元素超出隐藏overflow:hidden生效

<style>
      /* 文字超出一行省略 */
      .ellipsis-1 {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      /* 文字超出2行省略 */
      .ellipsis-2 {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2; /*限制文本行数*/
        -webkit-box-orient: vertical;
      }
      .box {
        width: 500px;
        border: 1px solid green;
        margin-top: 20px;
      }
    </style>
    <div class="box">
      把酒问月 作者: 唐代 李白 青天有月来几时?我今停杯一问之。
      人攀明月不可得,月行却与人相随。 皎如飞镜临丹阙,绿烟灭尽清辉发。
      但见宵从海上来,宁知晓向云间没。 白兔捣药秋复春,嫦娥孤栖与谁邻?
      今人不见古时月,今月曾经照古人。 古人今人若流水,共看明月皆如此。
      唯愿当歌对酒时,月光长照金樽里。
    </div>
    <div class="box ellipsis-1">
      把酒问月 作者: 唐代 李白 青天有月来几时?我今停杯一问之。
      人攀明月不可得,月行却与人相随。 皎如飞镜临丹阙,绿烟灭尽清辉发。
      但见宵从海上来,宁知晓向云间没。 白兔捣药秋复春,嫦娥孤栖与谁邻?
      今人不见古时月,今月曾经照古人。 古人今人若流水,共看明月皆如此。
      唯愿当歌对酒时,月光长照金樽里。
    </div>
    <div class="box ellipsis-2">
      把酒问月 作者: 唐代 李白 青天有月来几时?我今停杯一问之。
      人攀明月不可得,月行却与人相随。 皎如飞镜临丹阙,绿烟灭尽清辉发。
      但见宵从海上来,宁知晓向云间没。 白兔捣药秋复春,嫦娥孤栖与谁邻?
      今人不见古时月,今月曾经照古人。 古人今人若流水,共看明月皆如此。
      唯愿当歌对酒时,月光长照金樽里。
    </div>
    <script>
      let boxs = document.querySelectorAll('.box');
      for (let box of boxs) {
        console.log(box.clientWidth, box.scrollWidth);
        let div = document.createElement('div');
        div.innerHTML = [
          'clientWidth',
          box.clientWidth,
          'scrollWidth',
          box.scrollWidth,
          'clientHeight',
          box.clientHeight,
          'scrollHeight',
          box.scrollHeight
        ].join(' ');
        div.style.color = 'red';
        box.insertAdjacentElement('afterend', div);
      }
    </script>

参考

如何判断ellispsis生效了