Use:
min-width: 0
+
text-overflow: ellipsis
+
white-space: nowrap
Try resize the box above
HTML:
<div class="target">
<div class="target-title">
Text here is very very long that it might
get truncate if this box get resized too small
</div>
<div class="target-button">
Button
</div>
</div>
CSS:
.target {
display: flex;
width: 100%;
justify-content: space-between;
align-items: center;
}
.target-title {
overflow: hidden;
padding: 5px;
min-width: 0;
text-overflow: ellipsis;
white-space: nowrap;
}
.target-button {
padding: 5px 10px;
background: #2196F3;
color: white;
}
flexbox text wrap flexbox overflow auto flexbox overflow hidden flexbox prevent overflow flexbox content overflow flexbox white-space nowrap min-height min-content text overflow multiline