CSS: Flexbox + Ellipsis

Manchmal sind ganz einfache Dinge sehr komplex. CSS-Ellipsis ist an sich einfach. Aber mit Flexbox kann es plötzlich dazu kommen, dass es einfach nicht funktioniert. Alles funktioniert nur die "..." sind nicht zusehen, weil es einfach alles zur Seite rausragt und die Breite hält.


<div class=""flex-container">
<div class="flex-child">
<header>LONG TEXT</header>
</div>
</div>



.flex-child header{
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}


Die Lösung hier ist [url=]https://css-tricks.com/flexbox-truncated-text/min-width: 0;[/url].

Also:

.flex-child {
min-width: 0;
}

.flex-child header{
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}


Super schnelle Lösung.. aber wie sollte man da alleine drauf kommen, wenn man nur mal schnell Ellipsis einbauen will?
User annonyme 2021-05-23 13:57
css, ellipsis, flex box, hannes pries, min width, problem, text overflow, tipp, webdesign

write comment:
Three + = 11

Möchtest Du AdSense-Werbung erlauben und mir damit helfen die laufenden Kosten des Blogs tragen zu können?