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;
}