Gibt es eine gute Möglichkeit, Text mit einfachem HTML und CSS abzuschneiden, damit dynamischer Inhalt in ein Layout mit fester Breite und Höhe passt?
Ich habe serverseitig nach logischer Breite abgeschnitten (dh eine blind erratene Anzahl von Zeichen), aber da ein 'w' breiter als ein 'i' ist, ist dies tendenziell suboptimal und erfordert auch ein erneutes Erraten ( und weiter optimieren) die Anzahl der Zeichen für jede feste Breite. Im Idealfall erfolgt das Abschneiden im Browser, der die physische Breite des gerenderten Texts kennt .
Ich habe festgestellt, dass der IE eine text-overflow: ellipsis
Eigenschaft hat, die genau das tut, was ich will, aber ich brauche diese, um browserübergreifend zu sein. Diese Eigenschaft scheint (etwas?) Standard zu sein , wird jedoch von Firefox nicht unterstützt. Ich habe verschiedene Problemumgehungen basierend auf gefunden overflow: hidden
, aber sie zeigen entweder keine Auslassungspunkte an (ich möchte, dass der Benutzer weiß, dass der Inhalt abgeschnitten wurde) oder sie zeigen sie die ganze Zeit an (auch wenn der Inhalt nicht abgeschnitten wurde).
Hat jemand eine gute Möglichkeit, dynamischen Text in ein festes Layout einzupassen, oder ist die serverseitige Kürzung nach logischer Breite so gut, wie ich es vorerst bekommen werde?
Antworten:
Update:
text-overflow: ellipsis
wird jetzt unterstützt ab Firefox 7 (veröffentlicht am 27. September 2011) unterstützt. Yay! Meine ursprüngliche Antwort folgt als historische Aufzeichnung.Justin Maxwell hat eine browserübergreifende CSS-Lösung. Es hat jedoch den Nachteil, dass der Text in Firefox nicht ausgewählt werden kann. In seinem Gastbeitrag auf Matt Sniders Blog finden Sie alle Details dazu.
Beachten Sie, dass diese Technik auch verhindert, dass der Inhalt des Knotens in JavaScript mithilfe der
innerHTML
Eigenschaft in Firefox aktualisiert wird . Eine Problemumgehung finden Sie am Ende dieses Beitrags.CSS
ellipsis.xml
DateiinhaltAktualisieren des Knoteninhalts
Verwenden Sie Folgendes, um den Inhalt eines Knotens auf eine Weise zu aktualisieren, die in Firefox funktioniert:
In Matt Sniders Beitrag finden Sie eine Erklärung, wie dies funktioniert .
quelle
text-overflow
wird keine Unterstützung füroption
Elemente angegeben (siehe Abschnitt Gilt für unter msdn.microsoft.com/en-us/library/ms531174(VS.85).aspx ).2014 März: Abschneiden langer Zeichenfolgen mit CSS: Eine neue Antwort mit Schwerpunkt auf Browserunterstützung
Demo auf http://jsbin.com/leyukama/1/ (Ich verwende jsbin, weil es die alte Version von IE unterstützt).
Die CSS-Eigenschaft -ms-text-overflow ist nicht erforderlich: Sie ist ein Synonym für die CSS-Eigenschaft text-overflow, aber Versionen von IE von 6 bis 11 unterstützen bereits die CSS-Eigenschaft text-overflow.
Erfolgreich getestet (auf Browserstack.com) unter Windows für Webbrowser:
Firefox: Wie von Simon Lieschke (in einer anderen Antwort) hervorgehoben, unterstützt Firefox nur die CSS-Eigenschaft für Textüberlauf ab Firefox 7 (veröffentlicht am 27. September 2011).
Ich habe dieses Verhalten in Firefox 3.0 und Firefox 6.0 zweimal überprüft (Textüberlauf wird nicht unterstützt).
Einige weitere Tests auf einem Mac OS-Webbrowser wären erforderlich.
Hinweis: Wenn eine Ellipse angewendet wird, möchten Sie möglicherweise einen Tooltip beim Bewegen mit der Maus anzeigen. Dies kann über Javascript erfolgen. Weitere Informationen finden Sie unter: Erkennung von HTML-Textüberlauf-Ellipsen und HTML - Wie kann ich den Tooltip NUR anzeigen, wenn die Ellipse aktiviert ist?
Ressourcen:
quelle
Wenn Sie mit einer JavaScript-Lösung einverstanden sind, gibt es ein jQuery-Plug-In, das dies browserübergreifend ausführt - siehe http://azgtech.wordpress.com/2009/07/26/text-overflow-ellipsis-for -firefox-via-jquery /
quelle
OK, Firefox 7 ist ebenso implementiert
text-overflow: ellipsis
wietext-overflow: "string"
. Die endgültige Veröffentlichung ist für den 27.09.2011 geplant.quelle
Eine andere Lösung für das Problem könnten die folgenden CSS-Regeln sein:
Der einzige Nachteil des obigen CSS besteht darin, dass das "..." hinzugefügt wird, unabhängig davon, ob der Text den Container überläuft oder nicht. Wenn Sie jedoch einen Fall haben, in dem Sie eine Reihe von Elementen haben und sicher sind, dass der Inhalt überläuft, ist dies ein einfacheres Regelwerk.
Meine zwei Cent. Hut ab vor der ursprünglichen Technik von Justin Maxwell
quelle
position: absolute; right: 0;
(und vergessen Sie nichtposition: relative
das reale Element, damit es funktioniert). Es wird sich jedoch mit dem Text überschneiden, sodass Sie möglicherweise auch eine Hintergrundfarbe hinzufügen möchten.