Text-Überlauf: Ellipse in Firefox 4? (und FF5)

Der 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 streiten sich seit 2005 darüber, aber trotz der offensichtlichen Nachfrage, können sie sich nicht wirklich dazu bringen, es zu implementieren (selbst eine experimentelle -moz- Implementierung wäre ausreichend).

Vor einigen Jahren hat jemand einen Weg gefunden, Firefox 3 zu hacken, um eine Ellipse zu unterstützen . Der Hack verwendet die -moz-binding , um ihn mithilfe von XUL zu implementieren. Etliche Websites nutzen diesen Hack jetzt.

Die schlechten Nachrichten? Firefox 4 entfernt die function -moz-binding , was bedeutet, dass dieser Hack nicht mehr funktioniert.

Sobald Firefox 4 veröffentlicht wird (später in diesem Monat, höre ich), werden wir auf das Problem zurückkommen, dass es diese function nicht unterstützt.

Meine Frage ist also: Gibt es anders herum? (Ich versuche, möglichst nicht auf eine Javascript-Lösung zurückzufallen)

[BEARBEITEN]
Viele Ups, also bin ich natürlich nicht der Einzige, der es wissen will, aber ich habe bisher eine Antwort, die im Grunde nur ‘javascript benutzen’ sagt. Ich hoffe immer noch auf eine Lösung, die entweder JS überhaupt nicht benötigt, oder im schlimmsten Fall nur als Fallback, in dem die CSS-function nicht funktioniert. Also werde ich ein Kopfgeld auf die Frage schreiben, auf die Chance, dass jemand irgendwo eine Antwort gefunden hat.

[BEARBEITEN]
Ein Update: Firefox ist in den schnellen Entwicklungsmodus gegangen, aber trotz der Veröffentlichung von FF5 wird diese function immer noch nicht unterstützt. Und jetzt, da die Mehrheit der Benutzer von FF3.6 aktualisiert hat, ist der Hack keine Lösung mehr. Die guten Nachrichten, die mir gesagt werden, dass es zu Firefox 6 hinzugefügt werden könnte , das mit dem neuen Veröffentlichungsplan in nur einigen Monaten heraus sein sollte. Wenn das der Fall ist, dann denke ich, dass ich es abwarten kann, aber es ist eine Schande, dass sie es früher nicht hätten sortieren können.

[ENDBEARBEITEN]
Ich sehe, dass die Ellipsen-function endlich zu Firefox “Aurora Channel” (dh Entwicklungsversion) hinzugefügt wurde. Dies bedeutet, dass es nun als Teil von Firefox 7 veröffentlicht werden sollte, der gegen Ende 2011 erscheinen wird. Was für eine Erleichterung.

Versionshinweise finden Sie hier: https://developer.mozilla.org/en-US/Firefox/Releases/7

Solutions Collecting From Web of "Text-Überlauf: Ellipse in Firefox 4? (und FF5)"

Spudley, du könntest das gleiche erreichen, indem du ein kleines JavaScript mit jQuery schreibst:

 var limit = 50; var ellipsis = "..."; if( $('#limitedWidthTextBox').val().length > limit) { // -4 to include the ellipsis size and also since it is an index var trimmedText = $('#limitedWidthTextBox').val().substring(0, limit - 4); trimmedText += elipsis; $('#limitedWidthTextBox').val(trimmedText); } 

Ich verstehe, dass es einen Weg geben sollte, den alle Browser nativ unterstützen (ohne JavaScript), aber das haben wir an dieser Stelle.

BEARBEITEN Auch könnten Sie es besser machen, indem Sie eine css class an alle diese festen Breite Feld say fixWidth und dann etwas wie folgt tun:

 $(document).ready(function() { $('.fixWidth').each(function() { var limit = 50; var ellipsis = "..."; var text = $(this).val(); if (text.length > limit) { // -4 to include the ellipsis size and also since it is an index var trimmedText = text.substring(0, limit - 4); trimmedText += elipsis; $(this).val(trimmedText); } } } 

EDIT 09/30/2011

FF7 ist out, dieser Fehler ist behoben und es funktioniert!


BEARBEITEN 29.08.2011

Dieses Problem wird als getriggers 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, all diese Hacks zu entfernen.

ALT

Ich habe eine andere Antwort: warte .

Das FF-Entwicklerteam ist auf der Suche nach der Lösung dieses Problems.

Sie haben vorläufigen Fix für Firefox 6 eingestellt.

Firefox 6 !! Wann wird das herauskommen?!?

Einfach dort, imaginäre, überreaktive Person. Firefox ist auf der schnellen Entwicklungsspur. FF6 soll sechs Wochen nach Firefox 5 veröffentlicht werden. Firefox 5 soll am 21. Juni 2011 veröffentlicht werden.

Das bringt den Fix Anfang August 2011 … hoffentlich.

Sie können sich für die Mailing-Liste anmelden, die auf den Fehler in der Frage des ursprünglichen Posters folgt.

Oder Sie können hier klicken ; was auch immer am einfachsten ist.

Ich muss sagen, ich bin ein wenig enttäuscht, dass der einzige Browser-spezifische Hack in meiner Anwendung FF4 unterstützen wird. Die obige JavaScript-Lösung berücksichtigt keine fonts mit variabler Breite. Hier ist ein ausführlicheres Skript, das dies berücksichtigt. Das große Problem bei dieser Lösung ist, dass wenn das Element mit dem Text ausgeblendet wird, wenn der Code ausgeführt wird, die Breite der Box nicht bekannt ist. Das war ein Deal-Breaker für mich, also hörte ich auf, 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 nicht vollständig waren. Ich beabsichtigte, einen Browser-Check hinzuzufü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 Fiedeln zur Verfügung stehen: http://jsfiddle.net/kn9Qg/130/

HTML:

 
hello World

CSS:

 #test { margin-top: 20px; width: 68px; overflow: hidden; white-space: nowrap; border: 1px solid green; } 

Javascript (verwendet jQuery)

 function ellipsify($c){ // 
content container (passed) //
bounds //
outer // inner //
// dots //
//
var $i = $('' + $c.html() + ''); var $d = $('...'); var $o = $('
'); var $b = $('
'); $b.css( { 'white-space' : "nowrap", 'display' : "block", 'overflow': "hidden" }).attr('title', $c.html()); $o.css({ 'overflow' : "hidden", 'width' : "100%", 'float' : "left" }); $c.html('').append($b.append( $o.append($i)).append($d)); function getWidth($w){ return parseInt( $w.css('width').replace('px', '') ); } if (getWidth($o) < getWidth($i)) { while (getWidth($i) > (getWidth($b) - getWidth($d)) ) { var content = $i.html(); $i.html(content.substr(0, content.length - 1)); } $o.css('width', (getWidth($b) - getWidth($d)) + 'px'); } else { var content = $i.html(); $c.empty().html(content); } }

Es würde wie gerufen werden:

 $(function(){ ellipsify($('#test')); }); 

Ich bin auch in der letzten Woche in diesen Gremlin gerannt .

Da die akzeptierte Lösung keine Schriften mit variabler Breite berücksichtigt und wwwhacks Lösung eine While-Schleife hat, werde ich meine $ .02 eincasting.

Ich konnte die Bearbeitungszeit meines Problems drastisch reduzieren, indem ich Kreuzmultiplikation verwendete. Im Grunde haben wir eine Formel, die so aussieht:

Bildbeschreibung hier eingeben

Die Variable x ist in diesem Fall, was wir lösen müssen. Wenn es als Ganzzahl zurückgegeben wird, gibt es die neue Länge, die der überfließende Text sein sollte. Ich habe die MaxLength um 80% multipliziert, um den Ellipsen genügend Platz zum Zeigen zu geben.

Hier ist ein komplettes HTML-Beispiel:

          
Short Value
The quick brown fox jumps over the lazy dog; lots and lots of times
Prince
Longer Value
For score and seven year ago
Brown, James
Even Long Td and Div Value
Once upon a time
Schwarzenegger, Arnold

Ich verstehe, dass dies nur ein JS-Fix ist, aber bis Mozilla den Fehler behebt, bin ich einfach nicht schlau genug, um eine CSS-Lösung zu entwickeln.

Dieses Beispiel funktioniert am besten, weil JS jedes Mal aufgerufen wird, wenn ein Raster in unserer Anwendung geladen wird. Die Spaltenbreite für jedes Gitter variiert und wir haben keine Kontrolle darüber, welche Art von Computer unsere Firefox-Benutzer unsere App ansehen (wobei wir diese Kontrolle natürlich nicht haben sollten :)).

Diese reine CSS-Lösung ist wirklich eng, abgesehen von der Tatsache, dass nach jeder Zeile Ellipsen erscheinen.