Text wrapping, truncation, and readable content

Long names, URLs, and untrusted user-generated text can break a layout. Utilities such as break-words, truncate, line-clamp-* (where available in your version), and whitespace-nowrap control wrapping and overflow. Use truncation only when hiding text is acceptable and the full value remains discoverable—for example, through a details view or an accessible label.

For paragraphs and articles, prioritize natural wrapping. Avoid whitespace-nowrap on long content in a narrow card unless horizontal scrolling or another clear behavior is intended.

Keep long task titles inside a card

<div class="flex min-w-0 items-start gap-3 rounded-xl border p-4">
  <input class="mt-1 size-4 shrink-0" type="checkbox" aria-label="Mark task complete">
  <div class="min-w-0 flex-1">
    <h3 class="truncate font-semibold" title="Prepare the detailed quarterly product reliability report">
      Prepare the detailed quarterly product reliability report
    </h3>
    <p class="mt-1 break-words text-sm text-slate-600">Owner: frontend-platform-team@example.com</p>
  </div>
</div>

💡 min-w-0 lets the flex child become narrower than its intrinsic content width. truncate clips the title with an ellipsis on one line. The title attribute can expose the full title on pointer hover, but do not rely on it as the only way to access important information.

Key Takeaways

Use truncate only when losing visible text is acceptable.
min-w-0 is a useful fix for overflow inside flex children.
Keep links and user-generated content readable at narrow widths.

Text wrapping, truncation, and readable content

STAY UPDATED WITH BYTES!