Text utilities

tier 2 — classes

How one line reads: where it sits, how loud it is, and what happens when it is longer than the box it is in. These are the utilities without the sedna- prefix, because .text-end means the same thing everywhere.

Alignment and numbers

.text-start, .text-center and .text-end are logical, so they mirror with the document direction. .text-nums is tabular figures — every digit the same width, so a column lines up and a counter does not jitter — and .text-nowrap keeps a label on one line.

Default alignment	1,204
.text-end and .text-nums	86
down a column	1,079

.text-nowrap .text-start .text-center

<div class="sedna-col" style="max-width:420px">
    <table class="table">
        <tr><td>Default alignment</td><td class="text-end text-nums">1,204</td></tr>
        <tr><td>.text-end and .text-nums</td><td class="text-end text-nums">86</td></tr>
        <tr><td>down a column</td><td class="text-end text-nums">1,079</td></tr>
    </table>
    <div class="sedna-row" style="border:1px solid var(--border); padding:8px">
        <span class="text-nowrap">.text-nowrap</span>
        <span class="text-start sedna-fill">.text-start</span>
        <span class="text-center sedna-fill">.text-center</span>
    </div>
</div>

Size and tone

.text-sm and .text-lg are two type steps either side of the body size, for a line that has to be quieter or louder without becoming a heading. .text-muted is the secondary foreground and .text-mono the monospace stack — an id, a key, a path.

.text-sm default .text-lg

.text-muted — a line that is present but not the point .text-mono — whk_live_8f2c1d

<div class="sedna-col" style="max-width:420px">
    <div class="sedna-row" style="border:1px solid var(--border); padding:8px">
        <span class="text-sm">.text-sm</span>
        <span>default</span>
        <span class="text-lg">.text-lg</span>
    </div>
    <div class="sedna-col sedna-gap-1" style="border:1px solid var(--border); padding:8px">
        <span class="text-muted">.text-muted — a line that is present but not the point</span>
        <span class="text-mono">.text-mono — whk_live_8f2c1d</span>
    </div>
</div>

Overflow

.text-truncate is one line cut with an ellipsis, and it includes min-width: 0 because the usual parent is a flex item that otherwise refuses to shrink below its content — the most common reason truncation “does not work”. .text-clamp-2 and .text-clamp-3 cut after two or three lines, and .text-break breaks inside a word when there is nowhere else to break.

A single line long enough that it has to be cut with an ellipsis rather than wrapped kept

.text-clamp-2 cuts after two lines. This paragraph is deliberately longer than two lines so that the cut is visible, and it goes on for a while after that to make the point.

.text-clamp-3 cuts after three lines with an ellipsis, however long the text is. This paragraph is deliberately longer than three lines so that the cut is visible, and it goes on for a while after that to make the point, and then a little further still.

.text-break/pipelines/eu-west/reconciliation-2026-08-03T12-04-31Z.ndjson

<div class="sedna-col" style="max-width:420px">
    <div class="sedna-row" style="border:1px solid var(--border); padding:8px">
        <span class="text-truncate">A single line long enough that it has to be cut with an ellipsis rather than wrapped</span>
        <span class="badge sedna-shrink-0">kept</span>
    </div>
    <p class="text-clamp-2 sedna-mb-0" style="border:1px solid var(--border); padding:8px">
        .text-clamp-2 cuts after two lines. This paragraph is deliberately longer than two lines so
        that the cut is visible, and it goes on for a while after that to make the point.
    </p>
    <p class="text-clamp-3 sedna-mb-0" style="border:1px solid var(--border); padding:8px">
        .text-clamp-3 cuts after three lines with an ellipsis, however long the text is. This
        paragraph is deliberately longer than three lines so that the cut is visible, and it goes on
        for a while after that to make the point, and then a little further still.
    </p>
    <p class="text-break sedna-mb-0 text-mono" style="border:1px solid var(--border); padding:8px; max-width:200px">
        .text-break/pipelines/eu-west/reconciliation-2026-08-03T12-04-31Z.ndjson
    </p>
</div>