Seit der Veröffentlichung dieses Artikels im Jahr 2011 hat sich einiges geändert! Wenn Sie nach einem moderneren Ansatz suchen, um eine Zeichenkette zu kürzen, lesen Sie die CSS-Eigenschaft line-clamp sowie dieses Tutorial, das sie zusammen mit einem Verblassungseffekt verwendet.
Alle folgenden Bedingungen müssen erfüllt sein, daher muss der Text in einer einzigen geraden Zeile stehen, die einen Kasten überfließt, dessen Überlauf versteckt ist.
.truncate {
width: 250px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}Beachten Sie die hier verwendete feste Breite. Der Kernpunkt ist, dass das Element eine Art bestimmbare Breite benötigt, auf die Sie bei Flexbox besonders achten müssen
Suchen Sie nach dem Kürzen auf eine bestimmte Anzahl von Zeilen? Vielleicht gefällt Ihnen auch dieser nette Verblassungs-Kürzungseffekt.
Ich mag diesen, aber dafür gibt es keine Firefox-Unterstützung.
Das Fallback ist aber gut (meiner Meinung nach). Es schneidet einfach ab.
Ja, das stimmt, aber das Aussehen gefällt mir nicht. Ich habe auf einer Website ein zusätzliches HTML-Element verwendet, um es in FF besser aussehen zu lassen.
Geben Sie dem HTML-Element die Eigenschaft `position: absolute`, positionieren Sie es mit `right: 0` und geben Sie ihm eine Breite von 20px. Verwenden Sie dann `background-image: -moz-linear-gradient(...)`, um einen Verlauf von transparent (ich habe rgba mit Deckkraft 0 verwendet) zu einer soliden Farbe (der Hintergrundfarbe des Elements, in dem der Text platziert ist) zu erzeugen. Passen Sie bei Bedarf die Breite an und fügen Sie einen Wert für die `z-index`-Eigenschaft hinzu.
Oder Sie könnten ein PNG-Bild verwenden, das wäre aber in allen Browsern sichtbar.
Die erste Lösung ist ein echter CSS-Trick, nicht wahr? ;)
Ein Benutzer könnte davon profitieren zu wissen, dass eine Zahl oder ein Text gekürzt wird. Ich habe meine Lösung für FF hier gefunden.
Vielen Dank für all die Hilfe, Chris!
Glücklicherweise wurde die Unterstützung für Auslassungspunkte in Firefox 7 hinzugefügt. Jetzt, wo Firefox in Version 30+ ist, können Sie davon ausgehen, dass dies auf den Computern der meisten Firefox-Benutzer funktioniert :)
Bitte wenden Sie JS für die Unterstützung aller Browser an.
function shorten(text, maxLength) {
var ret = text;
if (ret.length > maxLength) {
ret = ret.substr(0,maxLength-3) + “…”;
}
return ret;
}
Diese Seite zeigt Ihnen, wie Sie es auch in FF zum Laufen bringen.
http://mattsnider.com/css/css-string-truncation-with-ellipsis/
Es funktioniert in IE6.. aber nicht in FF.. lahm!
Nun, der von Ihnen angegebene Link lässt es auch in Fx funktionieren :-)
Einer der Vimeo-Entwickler hat auch eine JavaScript-Datei dafür erstellt. Ich glaube, sie funktioniert in allen Browsern und funktioniert sowohl bei Textblöcken als auch bei einzelnen Zeilen.
Es könnte etwas mehr CPU-Leistung beanspruchen, wenn Sie viele kleine Textblöcke haben, aber sie hat für mich die paar Male, die ich sie verwendet habe, gut funktioniert.
http://reusablebits.com/post/2642059628/introducing-clamp-js
Etwas mehr Leistung? Das ist ein Ressourcen-Monster.
241 Zeilen Code, um eine einfache Zeichenkette zu kürzen? Ich bin sicher, es ist wunderbar und dient vielen anderen Zwecken außerhalb meiner eigenen Situation... aber trotzdem... 241 Zeilen. Mein Gott!
Ist es möglich, CSS-Auslassungspunkte für mehrere Zeilen zu verwenden? Oder erfordert das JavaScript?
-webkit-line-clamp(eine nicht unterstützte WebKit-Eigenschaft) erlaubt Ihnen, das zu tunhttp://dropshado.ws/post/1015351370/webkit-line-clamp
Opera hat etwas richtig Cooles
text-overflow: -o-ellipsis-lastline;Ich habe das implementiert und es funktioniert ziemlich gut.
http://www.mobify.com/blog/multiline-ellipsis-in-pure-css/
Gibt es eine `line-clamp`-Eigenschaft für das neueste Firefox?
Hallo,
Ich habe eine Aussage, die Auslassungspunkte anzeigen sollte, aber die hochgestellte Ziffer danach nicht beeinträchtigen sollte.
Zum Beispiel sollte meine Aussage so aussehen: „Gesamtwert……^1“
Helfen Sie mir, wie ich das lösen kann.
Ich frage mich immer noch, ob jemand dafür eine Lösung gefunden hat. Zumindest ich nicht ohne jegliche HTML-Markup-Manipulation.
Ist das eine Sache von CSS3 oder CSS 2.1? Ich bin nur neugierig, wie weit hinter dem Zeitplan ich bin :) PS. Chris, Sie leisten großartige Arbeit. Danke für alles!
CSS3
Das ist gut, aber es scheint immer noch keine Firefox-Unterstützung zu geben. Mein Dreamweaver CS5.5 hat nicht einmal ein Dropdown dafür.
Das wird in Firefox mit Gecko 7.0+ unterstützt.
https://developer.mozilla.org/en/CSS/text-overflow :)
Hallo – weiß jemand, wie man das mit einem ganzen Wort macht?
Ich habe `text-overflow:ellipsis-word` ein paar Mal gesehen, konnte aber nicht genügend Dokumentation finden, um zu entscheiden, ob es browserübergreifend / akzeptierte Nutzung ist oder nicht.
Angenommen, eine JS-Implementierung, um das ganze Wort abzuschneiden, wäre auch in Ordnung.
Danke.
@Thierry Koblentz: Vielen Dank! Ich suchte nach mehrzeiliger Kürzung nur mit CSS.
Hat großartig funktioniert, danke! Schöne Kommentarbox übrigens!
Scheint, als ob das jetzt in Firefox funktioniert... Könnte eine andere Möglichkeit, dies zu erreichen, (zusätzlich zum ursprünglichen CSS) sein
.truncate {
width: 230px;
}
.truncate:after{
content:”…”;
}
Brillante Lösung – Danke für Ihren Beitrag, Kollege, und danke an Chris für die Initiierung des Threads.
Das Tolle an diesem Ansatz ist, dass er auch für mehrzeilige Blöcke funktioniert und natürlich auch von Firefox vor Version 7 unterstützt wird. Ich sehe das Problem, dass, wenn Ihr Text tatsächlich passt, Sie mit einer nutzlosen Auslassung enden. Wenn Sie *wissen*, dass Ihr Text gekürzt wird, können Sie genauso gut PHP verwenden, um ihn zu kürzen und einen [...] Link hinzuzufügen.
Ich denke, am Ende hängt alles vom Kontext ab.
Ich hatte einen Fall, in dem ich dies nicht verwenden konnte (Masonry in WordPress, das Auszüge von Beiträgen anzeigt). Dieses CSS3 hat für mich funktioniert
word-wrap: break-word;
Das ist eine sehr gute Lösung... aber nur für Elemente mit fester Breite. Aber wenn ich eine Tabellenzelle mit `width: auto` habe und Text verstecken muss, scheitere ich :(.
Schauen Sie mal...
Ich habe mit diesem in IE9 experimentiert, und wenn Sie zwei `span`-Elemente nebeneinander haben, wobei das erste die Auslassungspunkte hat, dann werden alle folgenden `span`-Elemente in ihrer Position etwas versetzt. Wenn jemand dies erlebt hat und/oder es gut gehandhabt hat, lassen Sie es mich bitte wissen.
Schauen Sie sich das an.
Hallo Cris, füge `float:left` in deinem CSS hinzu.
.ellipsis {
display: inline-block;
max-width: 100px;
ms-text-overflow: ellipsis;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
margin-top: 0px;
padding-top: 0px;
float:left
}
Das können Sie auch mit mehrzeiligem Text tun, zum Beispiel: Sass-Modus
Ich habe `overflow: hidden;` vergessen.
Das funktioniert nicht.
Der Selektor `:after` platziert ‚…‘ nach dem versteckten Text (der ebenfalls versteckt ist).
Ja, funktioniert hier nicht...
Ich habe online gelesen, dass das Eingabefeld idealerweise keine Unterstützung für diese Eigenschaft (`text-overflow:ellipsis`) haben sollte, aber es wäre trotzdem schöner gewesen, wenn es Unterstützung dafür gäbe. Ich habe es versucht und festgestellt, dass FF und Chrome es unterstützen, aber IE und Safari nicht. :(.
Chris, Sie haben *IMMER* die Lösung für mich. Meine Web-App wäre heute nicht da, wo sie ist, ohne Sie. Vielen Dank für all die tollen Beiträge!
Hallo Chris, ich bin ein großer Fan von css-tricks. Besonders die Videobereiche. Das ist ein neuer Begriff (text-overflow) für mich. Jetzt ist mir das klar.
Danke
Das ist großartig zum Kürzen von einzeiligem Text.
Für mehrzeiligen Text verwende ich Dotdotdot.
Ich muss Auslassungspunkte bei Komma-separierten Werten setzen. Wenn ich "webkit-line-clamp" und die ".truncate"-Klasse aus Ihrem Artikel verwende, werden die Auslassungspunkte angezeigt, aber alle Werte erscheinen in verschiedenen Zeilen anstatt in einer Zeile. Wie kann ich sicherstellen, dass die Werte mit CSS in einer Zeile erscheinen?
Ich möchte nach 2 Zeilen kürzen, ist das möglich?
Gibt es 2018 eine Möglichkeit, das mit reinem CSS zu tun? :D
Line-clamp + ellipsis-Klasse.
Immer noch auf der Suche nach einer reinen CSS-Lösung zum Kürzen von mehreren Zeilen... bisher ohne Erfolg...
Hmm, das könnte ein Gewinner sein http://codepen.io/martinwolf/pen/qlFdp
Habe einen Sass-Mixin dafür erstellt http://codepen.io/dodozhang21/pen/mHvrn
Tolle Beispiele, aber sie funktionieren nicht in IE oder FF. Hat jemand ein mehrzeiliges Beispiel, das in allen Browsern funktioniert?
Ying, das hat erstaunlich gut funktioniert und war genau das, wonach ich gesucht habe! Danke!
Danke :))
Bitte fügen Sie eine Zeile hinzu! `display:inline-block;`
Je nach Situation würde auch `display:block` funktionieren.
Gibt es eine Möglichkeit, ein Element zu überprüfen und wenn dieses Element tatsächlich den String darin gekürzt hat, etwas zurückzugeben? Denn wenn es nicht gekürzt werden muss, hat es immer noch das CSS, aber wenn es kürzt, kann es nicht wirklich herausfinden, wonach es suchen soll... Gedanken?
Funktionierte perfekt im JQuery-Dialogtitel.
Ich musste dies leicht modifizieren, um in meinem Szenario zu funktionieren. Ich musste `display: inline-block` verwenden, um die Breite meiner Elemente zu begrenzen, und `vertical-align: middle`, um einige vertikale Ausrichtungsprobleme zu korrigieren, die `display: inline-block` verursachte. Für alle, die es nützlich finden könnten.
Gibt es eine Möglichkeit in CSS, Auslassungspunkte mitten im Text zu setzen, wie z. B. "HiIamHasan... gibt es eine Lösung"?
Der Punkt bei jeder CSS-Lösung ist, dass Sie CSS in Ihre Web-App einfügen müssen. Meine dynamische Website hat kein CSS, und ich bin zögerlich, auch HTML hineinzufügen. Ich habe herausgefunden, dass das Teilen einer Zeichenkette durch 2 die Zeichenkette kürzer macht, sodass sie für jedermann passen sollte.
Sie können Auslassungspunkte ohne explizite Breite erhalten – aber Sie müssen ein zusätzliches `overflow: hidden` für ein umschließendes Element haben.
Siehe: http://codepen.io/unthinkingly/pen/XMwJLG
Vielen Dank für das Update, unthinkingly, Sie haben mir wirklich geholfen. Ich bin froh, dass ich bis diese Woche gewartet habe, um nach der Lösung zu suchen.
Diese Option scheint relativ gut zu funktionieren, auch bei umgebrochenem Text, ist aber noch nicht zu 100 % kompatibel.
Bitte beachten Sie, dass Auslassungspunkte nicht angezeigt werden, wenn das Container-Element `display: flex` hat.
Danke Marek, guter Punkt, das gekürzte Element kann nicht `display: flex` sein. (Es sollte `display: block` sein.)
Auch wenn das gekürzte Element in ein Flex-Item verschachtelt ist, muss das Flex-Item `overflow: hidden` haben.
Ich habe eine Demo mit weiteren Details zur Verwendung mit Flex aktualisiert. Die Probleme sind nicht intuitiv, aber sobald Sie es zum Laufen gebracht haben, sind die Auslassungspunkte mit Flex wirklich nützlich!
http://codepen.io/unthinkingly/pen/XMwJLG
Auslassungspunkte werden in Firefox auch nicht angezeigt, wenn das Element `display: inline-block` hat.
Was ist mit dem Hinzufügen von `width: 100%` zum Kind-Element? Das scheint auch zu funktionieren. Vielleicht etwas weniger rätselhaft für zukünftige Code-Leser.
Ist es möglich, einen Abstand zwischen Text und Auslassungspunkten einzufügen?
Soweit ich weiß nicht, aber das ist eine wirklich interessante Idee. Die Eigenschaft
line-clampbefindet sich derzeit in einem Arbeitsentwurf und obwohl sie auch das nicht kann, könnte es sich lohnen, Ihren Anwendungsfall zur Spec-Diskussion hinzuzufügen.Ist es möglich, Auslassungspunkte nur bei Leerzeichen zu setzen? Also das Wort selbst nicht zu brechen, sondern das nächstgelegene Leerzeichen zur maximalen Breite zu finden? Natürlich kann ich keine Umbrüche hinzufügen, sonst geht davon aus, dass keine „…“ benötigt werden.
Irgendwelche Ideen?
Aktueller Code