Clamp Directive

The Clamp directive uses clampy.js to achieve consistent multiline ellipsis.

5 Lines

<p style="width:300px;" [smeClamp]="loremIpsum" [smeClampLines]="5" class="sme-border-inset-sm sme-margin-inset-sm sme-border-color-dark"></p>

2 Lines

<p style="width:300px;" [smeClamp]="loremIpsum" [smeClampLines]="2" class="sme-border-inset-sm sme-margin-inset-sm sme-border-color-dark"></p>

Auto Lines (Height 200px)

<p style="width:300px; height: 200px;" [smeClamp]="loremIpsum" class="sme-border-inset-sm sme-margin-inset-sm sme-border-color-dark"></p>

2 Lines, label text

<label style="width:300px; height: 200px;" [smeClamp]="loremIpsum" [smeClampLines]="2" class="sme-border-inset-sm sme-margin-inset-sm sme-border-color-dark"></label>