JavaScript，AngularJS：如何知道元素是否大于其容器？

假设我在h1元素中有一个标题（任何元素都会这样做）。它的内容是动态的（不知道标题的长度）。它应该显示在一行中。 h1在DIV中（我们称之为容器）的大小有限。JavaScript，AngularJS：如何知道元素是否大于其容器？

如何知道元素（h1）溢出其容器（DIV）？

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

容器的宽度被定义为相对于屏幕大小。

实施例：

#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>

最佳的解决办法是，如果它可以用于：初级在ngClass指令在ngIf，仲，但任何以下技术也都是良好： Javascript，AngularJS，CSS，AngularJS directive。

来源

2016-07-28 Michal Foksa

我不明白，所以你想要在容器中显示h1的全部内容？ – DirtyRedz

最终是的，但我不想改变容器的大小，所以如果内容溢出，我想有条件地应用CSS类来滚动内容（h1）。问题是我不知道如何制作“条件”。 –

你可以用纯css来完成，只需将overflow：auto设置为容器。它会检测内部的内容是否溢出，只有当溢出时才添加滚动条。 –

这是我在AngularJS directive解决方案。它不依赖父元素：

var myDirective = angular.module('myDirective', []); 
myDirective.directive('myDirective' , ['$timeout' , function($timeout) { 
    return { 
     link: function (scope , element , attrs) { 

      // Wait few milliseconds until element is re-rendered 
      // so that element properties reflect content size. 
      $timeout(function(){ 
       if (element[0].scrollWidth > element[0].offsetWidth){ 
        // overflow 
       } 
      }, 200); // $timeout 
     } // link 
    }; // return 
}]); // myDirective

用例：

<h3 my-directive>Hello World!</h3>

注：父元素必须有限制大小否则会调整的内容和元素将不会溢出。

来源

2016-08-01 08:36:57

假设jQuery你可以检查元素的宽度。

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

}

来源

2016-07-28 09:47:52 DirtyRedz

目前'jquery'是我最不喜欢的，但让我们拭目以待吧。谢谢你的努力！ –

+1显示我的方向。顺便说一句：我认为这个情况更好：'element.scrollWidth> element.offsetWidth'。它不依赖于父元素。 –

JavaScript，AngularJS：如何知道元素是否大于其容器？

回答

相关问题