Line Clamp
Limiting the number of lines displayed for text content.
Usage
Use d-lc-{n} to truncate text at a specific number of lines with an ellipsis.
<p class="d-lc-{n}">Lorem ipsum dolor...</p>
Avoiding display conflicts
Flex example
<!-- This won't work because DtStack is flex-based -->
<dt-stack class="d-lc-3"> ... </dt-stack>
<!-- This will -->
<dt-stack>
<p class="d-lc-3"> ... </p>
</dt-stack>
Grid example
<!-- This won't work -->
<div class="d-lc-3 d-d-grid"> ... </div>
<!-- This will -->
<div class="d-d-grid">
<p class="d-lc-3"> ... </p>
</div>
Custom
The d-lc-{n} utility currently goes up to 9. Should you need to go beyond, use the d-lc-custom class and locally adjust the CSS custom property --lc-lines.
<div class="d-lc-custom" style="--lc-lines: 11">
...
</div>