CSS
Flexbox: Truncate Text with Ellipsis in a Flexible Container
Master how to properly truncate long text with an ellipsis within a Flexbox item, ensuring it respects the container's flexible nature and responsiveness for clean UI.
.flex-container {
display: flex;
width: 300px; /* Example fixed width */
border: 1px solid #ccc;
padding: 10px;
}
.flex-item {
/* Allows item to shrink */
flex-shrink: 1;
/* Essential for ellipsis */
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
/* Optional: prevent minimum width issues */
min-width: 0;
background-color: #e0e0e0;
padding: 5px;
}
How it works: When dealing with long text inside a Flexbox item, truncating it with an ellipsis requires a specific combination of CSS properties. The `flex-item` needs `overflow: hidden`, `white-space: nowrap`, and `text-overflow: ellipsis` to hide overflow, prevent wrapping, and display the ellipsis. Additionally, `min-width: 0` is crucial for the flex item to correctly shrink and allow truncation, as flex items have a default `min-width` of `auto` which can prevent shrinking below their content size.