title: Ellipsis not working correctly in Safari with line-clamp
body: <p>I'm using line-clamp to limit the titles in a blog to a maximum of two lines. It works fine in firefox and chrome, but in safari the ellipsis doesn't appear where it should, instead it's at the middle of the sentence.</p>
  
  <p>I'm using bootrap 4, but also happens on another project made using Foundation 6, seems to happen when flex is used for the grid.</p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;div class="col-6"&gt;
          &lt;h1 class="title"&gt;
              &lt;a href="#"&gt;Long title goes here&lt;/a&gt;
          &lt;/h1&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And the scss</p>
  
  <pre><code>$enh1-font-size: 50px;
  $enh1-line-height: 60px;
  $enh1-lines-to-show: 2;
  .title {
    display: block;
    display: -webkit-box;
    max-height: $enh1-line-height*$enh1-lines-to-show;
    margin: 0 auto;
    font-size: $enh1-font-size;
    line-height: $enh1-line-height;
    -webkit-line-clamp: $enh1-lines-to-show;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  </code></pre>
  
  <p>The result should look something like this:</p>
  
  <p><em>Lorem ipsum dolor sit amet, consectetur<br>
  adipiscing elit. Etiam luctus dapibus...</em></p>
  
  <p>Instead I get this:</p>
  
  <p><em>Lorem ipsum dolor sit amet, consectetur<br>
  adipiscing el... Etiam luctus dapibus</em></p>