javascript 如何检查宽度为100%的元素的内容是否溢出？

bf1o4zei 于 2023-03-16 发布在 Java

关注(0)|答案(3)|浏览(136)

这是我的结构：

<div class="card">
    <div class="container">
        <slot />
    </div>
</div>

Card有一个固定的width为33rem。container为width100%。我需要知道时隙元素何时溢出，以便我可以向container元素添加一个类，并将word-break应用于它。
我试过这个：

if(el.clientWidth < el.scrollWidth || el.clientHeight < el.scrollHeight) {
      console.log('overflows')
}

但是它不起作用，因为el(='container')是width 100%，那么我怎么做呢？
PS：我的container应用了这些风格：

display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;

JavaScript

来源：https://stackoverflow.com/questions/75730439/how-to-check-if-the-content-of-an-element-with-a-width-of-100-is-overflowing

3条答案

按热度按时间

yyyllmsg1#

如果你看一下我刚才写代码的代码段，你的例子似乎可以工作。如果你有white-space: nowrap;，日志会出现，如果你删除它，它就不会再出现了。如果它不是你所指的例子，请给予一个工作的代码段，以便更好地理解你的问题。

const el = document.getElementById('cont');

if (el.clientWidth < el.scrollWidth || el.clientHeight < el.scrollHeight) {
    console.log('overflows')
}

#cont {
  width: 100%;
  outline: 1px solid red;
  white-space: nowrap;
}

<div class="card">
    <div id="cont" class="container">
        Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... 
    </div>
</div>

赞(0）回复(0）举报 2023-03-16

6ie5vjzr2#

我在文档主体上成功地使用了这个逻辑，但是对于容器，Chromium确实有错误，可能会使其中一些值返回零！
也许这与定位、显示和其他属性有关。

if((e.scrollHeight>e.offsetHeight)||(e.scrollWidth>=e.offsetWidth)){
    
}

顺便说一句，不要告诉人们集装箱的尺寸应该是什么...把它们放在那里！
你应该有一个完整的工作示例代码与一个Lorem ipsum甚至包括在内。

赞(0）回复(0）举报 2023-03-16

wwodge7n3#

我已经通过添加宽度修复了它：将0添加到具有flex：1的flex-item要素。

赞(0）回复(0）举报 2023-03-16

我来回答

javascript 如何检查宽度为100%的元素的内容是否溢出？

3条答案

相关问题

热门标签

最新问答