CSS
Truncate Text with Ellipsis Inside a Flexbox Item
Effectively apply `text-overflow: ellipsis` to text within a Flexbox container, ensuring long content truncates properly without disrupting the layout.
/* HTML */
<div class="flex-container">
<div class="flex-item">
<p class="truncated-text">This is a very long line of text that needs to be truncated with an ellipsis when it exceeds the available space within its container.</p>
</div>
<div class="flex-item fixed-width">Fixed Item</div>
</div>
/* CSS */
.flex-container {
display: flex;
width: 400px; /* Example fixed width for demonstration */
border: 1px solid #ccc;
padding: 10px;
gap: 10px;
}
.flex-item {
background-color: #f9f9f9;
border: 1px solid #eee;
padding: 8px;
flex: 1;
}
.flex-item.fixed-width {
flex: 0 0 100px; /* Fixed width item */
}
.truncated-text {
/* Essential properties for text truncation in a flex item */
white-space: nowrap; /* Prevents text from wrapping */
overflow: hidden; /* Hides overflowing content */
text-overflow: ellipsis;/* Displays an ellipsis for truncated text */
min-width: 0; /* Allows the flex item to shrink below its content size */
margin: 0; /* Remove default paragraph margin */
}
How it works: When using `text-overflow: ellipsis` within a Flexbox item, the default `min-width: auto` of flex items can prevent them from shrinking below their intrinsic content size, causing the text to not truncate correctly. This snippet provides the solution: setting `min-width: 0` on the flex item allows it to shrink. Combined with `white-space: nowrap`, `overflow: hidden`, and `text-overflow: ellipsis`, it ensures that long text properly truncates with an ellipsis when space is limited, maintaining layout integrity within the flex container.