Truncate text to one line with ellipsis. Classic overflow pattern.
/* Single line truncate with ellipsis */
.truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}overflow: hidden, text-overflow: ellipsis, white-space: nowrap. Element needs a width (or max-width) to truncate.
Tailwind's truncate utility is the same. Use for table cells, cards, or any single-line text.
className="truncate max-w-[200px]"