Every card eventually runs into text it doesn’t have room for, and most systems never decided what happens next.
Look at a real notification feed for five minutes and you'll find the bug: a message cut off mid-word with no ellipsis, or a comment card that just grows however tall the copy happens to be. Nobody wrote a rule for either case. One engineer reached for `overflow: hidden` and stopped there. Another let the card expand and hoped the layout could take it. Neither decision lives anywhere a designer can see or reuse it. Truncation tokens fix this the same way every other token in the system does: by naming the decision instead of leaving it implicit. `--truncate-lines-1`, `--truncate-lines-2`, and `--truncate-lines-3` each pair a line count with the same fallback recipe, `-webkit-line-clamp` set to that number, `text-overflow: ellipsis`, and `overflow: hidden`. The token isn't just the number, it's the number plus the promise that the cutoff will always be clean.
Picking the right token is mostly about the surface, not the sentence. A notification title gets one line, it either fits or it doesn't need to be read in full right now. A list item description gets two, enough to give context without letting one long row push every other row off the screen. A card's supporting copy can usually afford three before it starts crowding whatever comes after it. Once that decision is a token instead of a magic number buried in a component's CSS, a design review can point at `--truncate-lines-2` instead of eyeballing whether a card looks "about right."
What changes is what stops happening. No more silent mid-word cuts shipping to production because someone forgot the ellipsis rule. No more two nearly identical cards clamping at different line counts because two different engineers wrote two different values. The ellipsis stops looking like something broke and starts reading as something the system decided on purpose.
Follow @march4orthdesign on Instagram for the next one.
Leave a Reply
You must be logged in to post a comment.