JavaScript, AngularJS: Woher weiß ich, ob das Element größer als sein Container ist?

Question

Nehmen wir an, ich habe einen Titel in h1 Element (jedes Element würde tun). Der Inhalt ist dynamisch (Länge des Titels nicht bekannt). Es soll in einer Zeile angezeigt werden. h1 ist in einem DIV (nennen wir es einen Container) von begrenzter Größe.

Woher weiß ich, ob Element (h1) seinen Container (DIV) überläuft?

Also, wenn es überläuft würde ich eine CSS-Klasse anwenden, um mit der Situation umzugehen. Zum Beispiel würde ich versteckten Inhalt von h1 in Sicht scrollen.

• Die Breite des Containers ist relativ zur Bildschirmgröße definiert.

Beispiel:

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

beste Lösung wäre, wenn es in verwendet werden könnten: primary in ngIf, in ngClass Richtlinien sekundär, aber jede Technologien der folgenden sind auch gut: Javascript, AngularJS, CSS, AngularJS directive.

Answer 1

Hier ist meine Lösung in AngularJS directive. Es beruht nicht auf Elternelement:

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 

Anwendungsbeispiel:

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

Hinweis: Übergeordnete Elementgröße beschränkt sein muss sonst wird es auf den Inhalt anpassen und Element wird nie überlaufen.

Answer 2

Angenommen jquery könnte man die Breite der Elemente überprüfen.

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

}