DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!
Die CSS-Eigenschaft text-overflow befasst sich mit Situationen, in denen Text abgeschnitten wird, wenn er den Rahmen eines Elements überläuft. Er kann abgeschnitten werden (d. h. abgeschnitten, versteckt werden), Ellipsen ('…', Unicode-Bereichs-Wert U+2026) anzeigen oder einen vom Autor definierten String anzeigen (derzeit keine Browserunterstützung für vom Autor definierte Strings).
.ellipsis {
text-overflow: ellipsis;
/* Required for text-overflow to do anything */
white-space: nowrap;
overflow: hidden;
}Beachten Sie, dass text-overflow nur auftritt, wenn die Eigenschaft overflow des Containers den Wert hidden, scroll oder auto und white-space: nowrap; hat.
Textüberlauf kann nur bei Block- oder Inline-Block-Elementen auftreten, da das Element eine Breite haben muss, um überlaufen zu können. Der Überlauf erfolgt in der Richtung, die durch die direction-Eigenschaft oder verwandte Attribute bestimmt wird.
Die folgende Demo zeigt das Verhalten der text-overflow-Eigenschaft einschließlich aller möglichen Werte. Die Browserunterstützung variiert!
Wenn overflow auf scroll oder auto gesetzt wird, werden Scrollbalken angezeigt, um den zusätzlichen Text anzuzeigen, während bei hidden dies nicht der Fall ist. Der versteckte Text kann durch Auswahl der Ellipsen ausgewählt werden.
Alter Kram
Eine alte Version der Spezifikation besagt, dass man eine URL zu einem Bild für die Ellipse verwenden konnte, aber es sieht so aus, als wäre das gestrichen worden.
Es gibt eine Syntax mit zwei Werten, z. B. text-overflow: ellipsis ellipsis;, die den Überlauf an der linken und rechten Seite desselben Containers steuern würde. Ich bin mir nicht sicher, wie das erreicht werden könnte. Vielleicht zentrierter Text in einem zu kleinen Container? Die neue Spezifikation besagt, dass dies sowie die Definition eines Strings „gefährdet“ ist.
Ich bin mir nicht sicher, woher ellipsis-word stammt. Es ist weder in der Spezifikation noch in anderer Dokumentation außer auf WebPlatform.org zu finden.
Die Eigenschaft text-overflow *war früher* ein Kurzschrift für die Kombination von text-overflow-mode und text-overflow-ellipsis, aber das ist nicht mehr der Fall, und diese separaten Eigenschaften existieren nicht mehr.
Verwandte Eigenschaften
Weitere Ressourcen
- W3C Candidate Recommendation Spezifikation
- MDN Docs
- Web Platform Docs
- Caniuse.com
- CSS-Tricks Line Clamping!
- Mehrzeilige Ellipsen in reinem CSS verwalten
- Zeichenkette mit Auslassungspunkten kürzen
Browser-Unterstützung
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 25+ | 5.1+ | 19+ | 12.1+ | IE8+ | 2.1+ | 3.2+ |
Ich habe diesen Fehler in meinem Blog gefunden. Ich habe diesen jsfiddle erstellt: http://jsfiddle.net/GnKFM/
Wenn ich online suche, habe ich diesen offiziellen Thread gefunden. https://code.google.com/p/chromium/issues/detail?id=133700 – Issue 133700: text-overflow:ellipsis verarbeitet Inline-Block-Unterelemente nicht korrekt. Wussten Sie das? Kennen Sie einen Trick, um das zu lösen?
danke
Ich benutze diesen Code, um text-overflow zu vermeiden
.open > .dropdown-menu {overflow: auto;
display: block;
Text-überlauf: Ellipse;
}
aber immer noch nicht in der Lage, [xyz…] zu finden
Irgendwelche Vorschläge
fügen Sie diese Zeile hinzu
white-space: nowrap;
Wenn Sie eine lange Zeichenfolge ohne Leerzeichen haben, funktioniert text-overflow auch mit
white-space: normal;(mit Standardleerzeichen)Es gibt ein Problem mit der IE9-Darstellung, wenn Sie ein benutzerdefiniertes Glyphen als Schriftart-Familie und den Ellipsen-Effekt verwenden. Ich weiß noch nicht, was die Lösung ist.
text-overflow: ‘… mehr’;
Vielen Dank, funktioniert großartig (teste gerade Firefox)!
Ich habe ein Problem mit text-overflow. Ich benutze diesen Code, um das Ergebnis "vwxy…" anzuzeigen
{
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
aber das Ergebnis ist nicht so "vwxy…"
Sie sollten eine Breite für diesen Container definieren, und die Breite sollte kürzer als die Textlänge sein.
Sie können dies überprüfen -> Ihr Text zum Verlinken hier…
Funktioniert das Abschneiden mit Scrollbalken?
Es scheint, dass text-overflow: ellipsis ignoriert wird, wenn text-align: right gesetzt ist.
text-overflow funktioniert nicht im Standardbrowser des Lenovo Tablets S5000. Ich benutze bereits
text-overflow: ellipsis;
white-space:nowrap;
overflow:hidden;
Alle Browser sind mit dem obigen Code OK.
Aber es funktioniert nicht auf dem Lenovo Tablet. Wie kann ich das beheben?
Hören Sie auf, Lenovo Tablets zu kaufen.
HTML-CSS-Beispiel – Inhalt mit Div mit Inline-CSS ausblenden
Immer und ewig * Ein frischer Ansatz zum Einkaufen. *
Der beste Weg, um in HTML/CSS mit display:none; zu verstecken
Beispiel!!
Hallo..
.hideClass
{display:none;}
Benutzen Sie auch diesen Code, um Inhalte über Inline-CSS auszublenden
Ich glaube nicht, dass Sie den Punkt des Artikels verstehen.
Wowwww.. das ist einfach eine großartige Technik.
Vielen Dank,
aber gibt es eine Erklärung, warum oder wie min-width das Problem löst?
Nennen Sie mir zumindest – wie haben Sie entdeckt, dass die Einstellung von min-width das Problem löst?