title: How can I combine line-clamp and text-overflow:ellipsis?
body: <p>How can I (in Chrome) <strong>combine</strong> &quot;ellipsis if more than 3 lines&quot; and &quot;ellipsis for words that do not fit one line&quot;, with pure CSS?</p>
  <p>As far as I can see, <code>-webkit-line-clamp</code> needs <code>display:-webkit-box</code>, but that does prevent <code>text-overflow: ellipsis</code> to take effect.</p>
  <hr />
  <p>In the example, you <em>should</em> see <strong>two</strong> ellipses. One ellipsis on the last line, because the whole text is larger, and one ellipsis on the second line, because this word does not fit a line. But that is not the case? How can I achieve this?</p>
  <p><a href="http://jsfiddle.net/5nye9gLj/" rel="noreferrer">http://jsfiddle.net/5nye9gLj/</a></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>p {
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      max-width: 100px;
      overflow: hidden;
      text-overflow: ellipsis;
      height:56px /* fallback */
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;p&gt;Lorem ipsumnnnnnnnnnn dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et.&lt;/p&gt;</code></pre>
  </div>
  </div>
  </p>