CSS
Flexbox Single-Line Text Truncation with Ellipsis
Achieve elegant single-line text truncation with an ellipsis using Flexbox, ensuring text fits within containers without overflow issues for cleaner UI.
.truncate-text {
display: flex;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
min-width: 0; /* Important for flex items to prevent overflow */
}
How it works: This snippet demonstrates how to effectively truncate a single line of text with an ellipsis when it overflows its container using Flexbox. Setting `display: flex` on the container (or the text element itself if it's a flex item) allows `overflow: hidden`, `white-space: nowrap`, and `text-overflow: ellipsis` to work as expected. The `min-width: 0` is crucial for flex items to prevent them from pushing their parent container past its intended width when content is too long.