JavaScript, AngularJS : How do I know if element is larger than its container?

Question

假设我在 h1 元素中有一个标题(任何元素都可以)。它的内容是动态的(不知道标题的长度)。它应该显示在一行中。 h1 在一个大小有限的 DIV(我们称之为容器)中。

我怎么知道元素 (h1) 是否溢出了它的容器 (DIV)？

因此，如果它溢出，我会应用一个 CSS 类来处理这种情况。例如，我会将 h1 的隐藏内容滚动到 View 中。

• 容器的宽度是相对于屏幕尺寸定义的。

例子:

#container {
    width: 60%;
    background-color: gray;
    height: 50px;
    // overflow: hidden;
    position: relative;
}

h1 {
    overflow: hidden;
    height: 100%;
    margin: 0;
    line-height: 50px;
}

<div id="container">
    <h1>a soft white or grey mineral consisting of hydrated calcium sulphate. It occurs chiefly in sedimentary deposits and is used to make plaster of Paris and fertilizers, and in the building industry.</h1>
</div>

最好的解决方案是它是否可以用于:主要在 ngIf 中，次要在 ngClass 指令中，但以下任何技术也很好:Javascript 、AngularJS、CSS、AngularJS 指令。

Answer 1

假设您可以使用 jquery 检查元素的宽度。

if ($('h1').scrollWidth >   $('#container').innerWidth()) {
//overflown