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

2. 如果元素横向超出隐藏

clientWidth < scrollWidth && clientHeight == scrollHeight

3. 如果元素纵向超出隐藏

clientWidth == scrollWidth && clientHeight < scrollHeight

<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生效了

文章来源: pengshiyu.blog.csdn.net，作者：彭世瑜，版权归原作者所有，如需转载，请联系作者。

原文链接：pengshiyu.blog.csdn.net/article/details/125340818