Die text-overflow:ellipsis;
CSS-Eigenschaft muss eines der wenigen Dinge sein, die Microsoft für das Web richtig gemacht hat.
Alle anderen Browser unterstützen es jetzt ... außer Firefox.
Die Firefox-Entwickler haben seit 2005 darüber gestritten, aber trotz der offensichtlichen Nachfrage können sie sich nicht dazu bringen, es tatsächlich zu implementieren (selbst eine experimentelle -moz-
Implementierung wäre ausreichend).
Vor einigen Jahren hat jemand einen Weg gefunden, Firefox 3 zu hacken, damit es eine Ellipse unterstützt . Der Hack verwendet die -moz-binding
Funktion, um sie mit XUL zu implementieren. Eine ganze Reihe von Websites verwenden diesen Hack.
Die schlechten Nachrichten? Firefox 4 entfernt die -moz-binding
Funktion , was bedeutet, dass dieser Hack nicht mehr funktioniert.
Sobald Firefox 4 veröffentlicht wird (wie ich höre, später in diesem Monat), werden wir wieder auf das Problem zurückkommen, dass es diese Funktion nicht unterstützen kann.
Meine Frage lautet also: Gibt es einen anderen Weg, dies zu umgehen? (Ich versuche zu vermeiden, wenn möglich auf eine Javascript-Lösung zurückzugreifen.)
[BEARBEITEN]
Viele Up-Votes, daher bin ich natürlich nicht der einzige, der es wissen möchte, aber ich habe bisher eine Antwort, die im Grunde "Javascript verwenden" lautet. Ich hoffe immer noch auf eine Lösung, die entweder überhaupt kein JS benötigt oder im schlimmsten Fall nur als Ersatz verwendet, wenn die CSS-Funktion nicht funktioniert. Also werde ich ein Kopfgeld auf die Frage setzen, auf die Chance, dass jemand irgendwo eine Antwort gefunden hat.
[BEARBEITEN]
Ein Update: Firefox ist in den Schnellentwicklungsmodus übergegangen, aber obwohl FF5 jetzt veröffentlicht wird, wird diese Funktion immer noch nicht unterstützt. Und jetzt, da die Mehrheit der Benutzer ein Upgrade von FF3.6 durchgeführt hat, ist der Hack keine Lösung mehr. Die gute Nachricht ist, dass es möglicherweise zu Firefox 6 hinzugefügt wird, das mit dem neuen Release-Zeitplan in nur wenigen Monaten veröffentlicht werden sollte. Wenn das der Fall ist, kann ich es wohl abwarten, aber es ist eine Schande, dass sie es nicht früher hätten sortieren können.
[FINAL EDIT]
Ich sehe, dass die Auslassungsfunktion endlich zu Firefox '"Aurora Channel" (dh Entwicklungsversion) hinzugefügt wurde. Dies bedeutet, dass es jetzt als Teil von Firefox 7 veröffentlicht werden sollte, das Ende 2011 erscheinen soll. Was für eine Erleichterung.
Versionshinweise finden Sie hier: https://developer.mozilla.org/en-US/Firefox/Releases/7
Antworten:
Spudley, Sie könnten dasselbe erreichen, indem Sie mit jQuery ein kleines JavaScript schreiben:
Ich verstehe, dass es eine Möglichkeit geben sollte, dass alle Browser dies nativ unterstützen (ohne JavaScript), aber genau das haben wir an dieser Stelle.
BEARBEITEN Sie können es auch übersichtlicher gestalten, indem Sie eine
css
Klasse an alle Felder mit fester Breite anhängenfixWidth
und dann Folgendes tun:quelle
text-overflow:ellipsis;
damit ich die CSS-Option weiterhin in anderen Browsern verwenden kann.length()
seinlength
? Es ist eine Eigenschaft.EDIT 30.09.2011
FF7 ist raus, dieser Fehler ist behoben und es funktioniert!
EDIT 29.08.2011
Dieses Problem wird als behoben markiert und ist in FF 7 verfügbar. Wird derzeit am 27.09.2011 veröffentlicht.
Markieren Sie Ihre Kalender und machen Sie sich bereit, alle von Ihnen eingerichteten Hacks zu entfernen.
ALT
Ich habe noch eine Antwort: Warte .
Das FF-Entwicklerteam ist bemüht, dieses Problem zu lösen.
Sie haben vorläufige Korrektur für Firefox 6 eingestellt.
Einfach da, imaginäre, überreaktive Person. Firefox ist auf der Überholspur. FF6 wird sechs Wochen nach Firefox 5 veröffentlicht. Firefox 5 wird am 21. Juni 2011 veröffentlicht.
Damit ist das Problem irgendwann Anfang August 2011 behoben ... hoffentlich.
Sie können sich nach dem Fehler über den Link in der Frage des Originalplakats für die Mailingliste anmelden.
Oder Sie können hier klicken ; was auch immer am einfachsten ist.
quelle
Ich muss sagen, dass ich ein wenig enttäuscht bin, dass der einzige browserspezifische Hack in meiner Anwendung die Unterstützung von FF4 sein wird. Die obige Javascript-Lösung berücksichtigt keine Schriftarten mit variabler Breite. Hier ist ein ausführlicheres Skript, das dies berücksichtigt. Das große Problem bei dieser Lösung besteht darin, dass die Breite des Felds nicht bekannt ist, wenn das Element, das den Text enthält, beim Ausführen des Codes ausgeblendet wird. Dies war ein Deal Breaker für mich, also habe ich aufgehört, daran zu arbeiten / es zu testen ... aber ich dachte, ich würde es hier posten, falls es für jemanden von Nutzen ist. Stellen Sie sicher, dass Sie es gut testen, da meine Tests weniger als erschöpfend waren. Ich wollte eine Browserprüfung hinzufügen, um nur den Code für FF4 auszuführen und alle anderen Browser ihre vorhandene Lösung verwenden zu lassen.
Dies sollte hier zum Spielen verfügbar sein: http://jsfiddle.net/kn9Qg/130/
HTML:
CSS:
Javascript (verwendet jQuery)
Es würde heißen wie:
quelle
Ich bin in der letzten Woche auch auf diesen Gremlin gestoßen .
Da die akzeptierte Lösung keine Schriftarten mit variabler Breite berücksichtigt und die Lösung von wwwhack eine While-Schleife hat, werde ich meine $ .02 einwerfen.
Durch Kreuzmultiplikation konnte ich die Bearbeitungszeit meines Problems drastisch reduzieren. Grundsätzlich haben wir eine Formel, die so aussieht:
Die Variable x ist in diesem Fall das, was wir lösen müssen. Bei der Rückgabe als Ganzzahl wird die neue Länge angegeben, die der überlaufende Text haben soll. Ich habe die MaxLength mit 80% multipliziert, um den Ellipsen genügend Platz zum Anzeigen zu geben.
Hier ist ein vollständiges HTML-Beispiel:
Ich verstehe, dass dies nur ein JS-Fix ist, aber bis Mozilla den Fehler behebt, bin ich einfach nicht klug genug, um eine CSS-Lösung zu finden.
Dieses Beispiel funktioniert am besten für mich, da der JS jedes Mal aufgerufen wird, wenn ein Raster in unserer Anwendung geladen wird. Die Spaltenbreite für jedes Raster variiert und wir haben keine Kontrolle darüber, welchen Computertyp unsere Firefox-Benutzer unsere App anzeigen (was wir natürlich nicht haben sollten :)).
quelle
Diese reine CSS-Lösung ist sehr ähnlich, bis auf die Tatsache, dass nach jeder Zeile Auslassungspunkte angezeigt werden.
quelle