Hier im Forum bekommt ihr bei euren fragen schnelle hilfe.Hier geht es rund um das Web SeitenProgrammieren.Alles rund ums Javascript,Html,Php,Css und Sql.Auf fast allen Fragen haben wir eine Antwort.
Der Soforthilfe-chat verspricht das ,was sein Name sagt. Hier sind Leute Online die sofort ihre hilfe anbieten.Seht in der OnlineListe nach und wenn einer Online ist werdet ihr auch antwort bekommen. Admine ,Moderatoren und Helfer sind unsere Spezialisten in Sachen Web Programierung
4 Unwetterwarnungen in Deutschland
Die Datenbank wurde zuletzt am 19.09.2020 01:20:04 aktualiesiert

Lange Texte in HTML mit CSS kürzen – text-overflow: ellipsis

text-overflow: ellipsis
Es ist noch gar nicht so lange her, da bin ich mehr oder weniger zufällig auf eine sehr nützliche, mir bis dahin völlig unbekannte, CSS-Anweisung (text-overflow:ellipsis) gestoßen mit der man sehr einfach zu lange Texte per CSS elegant abschneiden bzw. kürzen kann.
Die CSS-Eigenschaft text-overflow bewirkt mit der Angabe ellipsis nicht nur das der Text innerhalb eines HTML-Elementes einfach abgeschnitten wird (overflow: hidden), sondern das am Ende des abgeschnittenen Wortes noch zusätzlich 3 Punkte dargestellt werden – und das ganz ohne JavaScript.

Nachdem ich mich dann etwas genauer über die Anweisung text-overflow informiert habe, habe ich gelernt das diese CSS-Anweisung ursprünglich von der High-End-Browser-Schmiede Microsoft *hust* stammt, und das schon seit der Version 5.5 (1999-2000) des bei Webentwicklern recht unbeliebten Internet Explorers.

Mittlerweile kann text-overflow: ellipsis aber für alle aktuell gängigen Browser angewendet werden. Der Firefox unterstützt dies beispielsweise seit der Version 7 vollständig, Chrome schon ewig, Opera seit Version 11 und Safari seit Version 3.1. Eine ausführliche Liste welche Browser-Versionen text-overflow unterstützen (auch mobile Browser), findet ihr bei caniuse.

Verwendung

Bei der Verwendung muss man noch an ein paar kleinere Dinge (CSS) beachten:

der Text darf nicht umbrechen (white-space:nowrap)

Überlauf verstecken (overflow:hidden)

Breite auf 100% setzen (width:100%) wenn der IE6 unterstützt werden soll

und natürlich text-overflow:ellipsis

.shorten-long-text{
   white-space: nowrap;
   overflow: hidden;
   width: 100%;
   text-overflow: ellipsis;
}

Demo

Hier eine kurze Demo:

Hier steht ein sehr langer Text

Hier steht ein sehr langer Text

Add Comment

* Required information
1000
Powered by Commentics

Comments (0)

No comments yet. Be the first!