<style>
.container {
  font-size: 12px;
}
</style>
<pre><b>line-clamp</b> is the shorthand of <i><b>max-lines</b> (where to clamp)</i>, <i><b>block-ellipsis</b> (what to put at break)</i> and <i><b>continue</b> (whether we should stop rendering after break)</i>
</pre>
<div class="container" style="line-clamp: 2">
  <div>
    1
    <div>
      2<br>
      3<br>
    </div>
    4<br>
    5<br>
    6<br>
  </div>
</div>
<pre><b>line-clamp: 2;</b> -clamp at the second line with ellipsis and don't show content after</pre>

<div class="container" style="line-clamp: 4 '!">
  <div>
    1
    <div>
      2<br>
      3<br>
    </div>
    4<br>
    5<br>
    6<br>
  </div>
</div>
<pre><b>line-clamp: 4 '!';</b> -clamp at the forth line with ! and don't show content after</pre>

<div class="container" style="line-clamp: 4">
  <div>
    1
    <div id=nested style="max-lines: 1">
      2<br>
      3<br>
    </div>
    4<br>
    5<br>
    6<br>
  </div>
</div>
<pre><b>line-clamp: 4 and max-lines: 1 on 'nested'</b>-notice the double clamping
</pre>

<pre>

longhands
</pre>

<div class="container" style="max-lines: 5; continue: discard; block-ellipsis: '?'">
  <div>
    1
    <div>
      2<br>
      3<br>
    </div>
    4<br>
    5<br>
    6<br>
  </div>
</div>
<pre>
<b>max-lines: 5
block-ellipsis: '?'
continue: discard</b>
</pre>

<div class="container" style="max-lines: 2; block-ellipsis: '?'">
  <div>
    1
    <div>
      2<br>
      3<br>
    </div>
    4<br>
    5<br>
    6<br>
  </div>
</div>
<pre><b>max-lines: 2 
block-ellipsis: '?'
continue: auto</b>
</pre>