title: Setting max number of lines in Bootstrap
body: <p>Here is my HTML:
      </p>
  
  <pre><code>    &lt;a href="#" ng-repeat="archive in archives" class="list-group-item list-group-item-action flex-column align-items-start"&gt;
          &lt;div class="d-flex w-100 justify-content-between"&gt;
              &lt;h5 class="mb-1"&gt;&lt;b&gt;{{extractDomain(archive.url)}}&lt;/b&gt;&lt;/h5&gt;
          &lt;/div&gt;
              &lt;p class="mb-1"&gt;{{archive.headline}}&lt;/p&gt;
              &lt;p class="pv-archiveText"&gt;{{archive.text}}&lt;/p&gt;
      &lt;/a&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>and the CSS:</p>
  
  <pre><code>.pv-archiveText {
    text-overflow: ellipsis;
    color: red;
  }
  </code></pre>
  
  <p>I'm seeing the text as red, but it's not being limited to one line. I tried </p>
  
  <pre><code>{
     overflow: hidden;
     text-overflow: ellipsis;
     display: -webkit-box;
     -webkit-box-orient: vertical;
     -webkit-line-clamp: N; /* number of lines to show */
     line-height: X;        /* fallback */
     max-height: X*N;       /* fallback */
  }
  </code></pre>
  
  <p>and multiple other styles, but none of them are working. Is it because of the Bootstrap/Angular?</p>