Truncate

.truncate clips a single line of text that overflows its container and adds an ellipsis, instead of letting it wrap or spill out.

<div style="max-width: 16rem; border: var(--cirth-border-width) solid var(--cirth-muted-border-color); border-radius: var(--cirth-border-radius); padding: var(--cirth-spacing);">
  <p class="truncate" style="margin-bottom: 0;">
    This line of text is much longer than its 16rem-wide container, so it truncates with an ellipsis.
  </p>
</div>

<p class="truncate">
  This line of text is much longer than its container, so it truncates
  with an ellipsis.
</p>

It's three declarations (overflow: hidden, white-space: nowrap, text-overflow: ellipsis), available only in the default build with classes enabled.