CSS overflow und ellipsis

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;
}
User annonyme 2019-03-28 18:19

write comment:
Six + = 11

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