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?
Ein kleiner Tipp, wenn man in einer Webapp zulange Listen- oder Tabelleneinträge zurecht schneiden möchte. Um anzuzeigen, dass der Text gekürzt ist will man oft ... am Ende stehen lassen. Das mit PHP, JavaScript, etc zu machen ist aber doof und overflow-hidden: hidden reicht nicht. Aber es gibt in CSS text-overflow.
.cut-ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
Der Text wird einzeilig und abgeschnitten. Zusätzlich werden 3 Punkte angehängt. Alles gut? Nur solange man es nicht bei einem <li> mit Bullet-Points verwendet. Die gehen dabei leider auch verloren. Aber auch hier gibt es eine Lösung, wobei man aber die Abstände des <li> zum linken Rand neu anpassen muss.
li.cut-ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
list-style-position: inside;
}