Truncate Text with Ellipsis
Single-line text truncation is one of the most common UI requirements: titles, table cells, breadcrumbs. Done wrong, the text wraps or overflows. Done right, it shrinks with a clean ellipsis. This snippet covers the three-line single-line recipe, an inline variant that needs `min-width: 0` inside flex parents, and a tooltip-friendly version that exposes the full text on hover.
808 views
20
.truncate {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}These three properties always travel together. white-space: nowrap prevents wrapping, overflow: hidden clips anything past the box edge, and text-overflow: ellipsis swaps the clip for a .... Without all three, the text either wraps or overflows visibly. The container also needs an explicit width or max-width; otherwise it expands to fit the content and the ellipsis never appears. This is the version to drop into a utility class and reach for everywhere.
.row {
display: flex;
align-items: center;
gap: 0.5rem;
}
.row .title {
flex: 1;
min-width: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}Flex children default to min-width: auto, which is the size of their content. That means a long title inside a flex row blows out the row instead of truncating, even with all the ellipsis properties set. Adding min-width: 0 overrides that default so the child can shrink below its intrinsic content width. This single line is the fix for 'why isn't my truncation working inside flex' bug reports. The same gotcha applies to grid children, with the same fix.
.has-tip {
position: relative;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.has-tip:hover::after {
content: attr(title);
position: absolute;
left: 0;
bottom: 100%;
margin-bottom: 4px;
padding: 4px 8px;
background: rgba(0, 0, 0, 0.85);
color: white;
font-size: 12px;
white-space: normal;
z-index: 10;
}Truncated text on its own hides information. Pairing the ellipsis with a tooltip on hover keeps the full text accessible. Using attr(title) lets the markup just set a regular title attribute, which doubles as the native browser tooltip and an accessible name. The ::after overlay produces a richer, styled tooltip on hover for sighted users. For full keyboard accessibility, replace this with a real ARIA-described tooltip in production.