title: JavaScript, AngularJS: How do I know if element is larger than its container?
body: <p>Let’s say I have a title in h1 element (any element would do). Its content is dynamic (do not know length of the title). It is supposed to be displayed in one line. h1 is in a DIV (let’s call it a container) of limited size. </p>
  
  <p>How do I know if element (h1) overflows its container (DIV)?  </p>
  
  <p>So that if it overflows I would apply a CSS class to deal with the situation. For example I would scroll hidden content of h1 into view.</p>
  
  <ul>
  <li>Width of the container is defined as relative to the screen size.</li>
  </ul>
  
  <p>Example:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#container {
      width: 60%;
      background-color: gray;
      height: 50px;
      // overflow: hidden;
      position: relative;
  }
  
  h1 {
      overflow: hidden;
      height: 100%;
      margin: 0;
      line-height: 50px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="container"&gt;
      &lt;h1&gt;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.&lt;/h1&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Best solution would be if it could be used in: primary in <code>ngIf</code>, secondary in <code>ngClass</code> directives, but any of following technologies are also good: <code>Javascript</code>, <code>AngularJS</code>, <code>CSS</code>, <code>AngularJS directive</code>.</p>