Rendered Pixelbreitendaten für jedes Zeichen in einer Schrift des Browsers

Question

Ich habe eine Tabellenspalte, die auf eine bestimmte Breite beschränkt werden - etwa 100 Pixel. Manchmal ist der Text in dieser Spalte breiter als diese und enthält keine Leerzeichen. Zum Beispiel:

a_really_long_string_of_text_like_this_with_no_line_breaks_makes_the_table_unhappy

Ich mag die Breite des Textserverseitigen berechnen und ein Auslassungszeichen nach der richtigen Anzahl von Zeichen hinzufügen. Das Problem ist, dass ich keine Daten über die gerenderte Größe des Textes.

Zum Beispiel unter der Annahme den Browser war Firefox 3 und die Schrift war 12px Arial. Was wäre die Breite des Buchstaben „a“ sein, wobei die Breite des Buchstaben „b“, etc.?

Haben Sie Daten, welche die Pixelbreite der einzelnen Zeichen haben? Oder ein Programm zu generieren?

Ich denke, eine clevere einmalige JavaScript-Skript den Trick tun könnte. Aber ich will keine Zeit neu zu erfinden das Rad verbringen, wenn jemand anderes dies bereits getan hat. Ich bin sicher nicht die erste Person, gegen dieses Problem zu entwickeln.

Answer 1

Dies würde nicht nur unmöglich sein Server-Seite zu tun, wäre es auch nicht sinnvoll. Sie müssen nicht, welchen Browser Ihr Client verwendet, und Sie nicht wissen, welche Einstellungen für die Schriftart auf der Clientseite wird außer Kraft setzen, was Styling Informationen, die Sie auf ein Stück HTML zuweisen. Man könnte denken, dass Sie in Ihrem Stil Eigenschaften absolute Positionierung Pixel verwenden, aber der Client einfach könnte oder solche mit einigen Plugin ignorieren alles zu vergrößern, weil der Client eine hoch dpi Bildschirm verwendet.

Mit Fixbreiten ist in der Regel eine schlechte Idee.

Answer 2

Wie wäre es Überlauf: Blättern

Answer 3

Ext JS hat ein Modul genau das zu tun

  

Textmetrics   Liefert präzise Pixelmessungen   für Textblöcke, so dass Sie   genau festzustellen, wie hoch und breit,   in Pixel, wird ein gegebener Textblock   Sein.

Ich bin sicher, dass es andere Bibliotheken gibt, die es auch tun.

Answer 4

Sehr sehr hart Server-Seite zu tun. Man kann nie wissen, welche Schriftarten Benutzer installiert haben, und es gibt viele Dinge, die die Anzeige von Text beeinflussen.

Versuchen Sie stattdessen:

table-layout: fixed;

Das wird sicherstellen, dass die Tabelle nicht größer ist als die Größe, die Sie angegeben.

Answer 5

Hier ist meine clientseitige Lösung, die ich kam mit. Es ist ziemlich spezifisch für meine Anwendung, aber ich es hier, falls jemand teilen bin sonst kommt über das gleiche Problem.

Es funktioniert ein wenig schneller als ich erwartet hatte. Und es nimmt der Inhalt der Zellen ist nur Text -. Beliebiger HTML wird wird die Formatierung in dem Verkürzung Prozess gelöscht werden

Es erfordert jQuery.

function fixFatColumns() {
  $('table#MyTable td').each(function() {
    var defined_width = $(this).attr('width');
    if (defined_width) {
      var actual_width = $(this).width();
      var contents = $(this).html();
      if (contents.length) {
        var working_div = $('#ATempDiv');
        if (working_div.is('*')) {
          working_div.html(contents);
        } else {
          $('body').append('<div id="ATempDiv" style="position:absolute;top:-100px;left:-500px;font-size:13px;font-family:Arial">'+contents+'</div>');
          working_div = $('#ATempDiv');
        }

        if (working_div.width() > defined_width) {
          contents = working_div.text();
          working_div.text(contents);
          while (working_div.width() + 8 > defined_width) {
            // shorten the contents of the columns
            var working_text = working_div.text();
            if (working_text.length > 1) working_text = working_text.substr(0,working_text.length-1);
            working_div.text(working_text);
          }
          $(this).html(working_text+'...')
        }

        working_div.empty();
      }

    }
  });

}

Answer 6

Dies ist im Wesentlichen unmöglich, auf der Serverseite zu tun. Neben dem Problem der Menschen mit unterschiedlichen Schriftarten installiert, auch Sie haben Kerning (den Buchstaben „f“ wird eine unterschiedliche Menge an Platz in Anspruch nehmen, je nachdem, was es als nächstes) und Schrift-Rendering-Optionen (ist Cleartype auf? „Große Schriftarten „?).

Answer 7

Es gibt nichts, was Sie serverseitige tun können, um es zu berechnen. Alles, was Sie für die Arbeit mit der Browser-Kennung Zeichenfolge, die Ihnen nicht sagen, das Betriebssystem des Benutzers und Browser genau oder nicht. Sie können auch „ask“ (über einen font-Tag oder CSS) für eine bestimmte Schriftart verwendet werden, um den Text anzuzeigen, aber es gibt keine Garantie, dass der Benutzer installiert, die Schrift hat. Darüber hinaus ist der Benutzer eine andere DPI-Einstellung auf Betriebssystemebene haben könnte, oder könnte den Text größer oder kleiner mit dem Browser Zoom-Funktion gemacht oder konnten ihre eigenen Sheet insgesamt werden.

Answer 8

Sie können den Text in eine unsichtbare Spanne setzen und lesen, dass Breite erstreckt, aber im Grunde das sieht aus wie jemand zu sabotieren Ihre Website versucht, und deshalb würde ich empfehlen, Beiträge mit Worten länger als eine bestimmte lenth, zum Beispiel 30 Zeichen Verbot ohne Räume (Links ermöglichen, länger zu sein! -)

- aber der einfache Ansatz ist ein Blockelement in der Tabelle-Zelle zu setzen:

<td><div style="width:100px;overflow:hidden">a_really_long_string_of_text_like_this_with_no_line_breaks_makes_the_ta ... </div></td>

Damit wird die Tisch-Poltern effektiv stoppen! O]

Answer 9

Wenn Sie dies in Ordnung sind mit nicht für FireFox funktioniert, warum nicht nur mit CSS? Haben Sie die Tabelle mit Tabellenlayout: fest, hat die betreffende Spalte Überlauf: hidden; text-overflow: Auslassungszeichen; white-space:. nowrap

Answer 10

http://www.css3.info/preview/text-overflow/

Dies ist eine neue Funktion von css3.

Answer 11

Einige Benutzer haben größere oder kleinere Standardschrifteinstellungen. Sie können dies auf dem Server nicht. Sie können es nur messen, wenn der Browser die Seite verdient gemacht hat.

Answer 12

Da Schriftgröße kann leicht auf der Browser-Seite geändert werden, Ihre serverseitige Berechnung sehr einfach ungültig gemacht.

Eine schnelle Client-Seite fix wäre Ihre Zellen mit einem Überlauf-Attribute stylen:

td
{
    overflow: scroll; /* or overflow: hidden;  etc. */
}

Eine bessere Alternative ist die Saiten Server-Seite zu verkürzen und einen einfachen JavaScript-Tooltip bereitzustellen, die die längere Version anzeigen können. Ein „erweitern“, um auch die helfen kann das Ergebnis in einem Overlay div angezeigt werden kann.

Answer 13

Was Sie wollen, ist das -Tag. Dies ist ein spezieller HTML-Tag, das den Browser anweist, dass es akzeptabel, ein Wort, das hier zu brechen, wenn eine Verpackung notwendig ist. Ich würde nicht das in den Text für dauerhafte Speicherung injizieren, da dann werden Sie Ihre Daten mit Kopplung wo / wie Sie diese Daten angezeigt werden. Es ist jedoch völlig akzeptabel, die Tags Serverseite in Code zu injizieren, die View-zentrierten ist (wie mit einem JSP-Tag oder möglicherweise in der Steuerung). Das ist, wie ich es tun würde. Verwenden Sie einfach einige reguläre Ausdrücke, Worte zu finden, die länger sind als X Zeichen und injizieren diesem Tag alle X-Zeichen in solche Worte.

Update: Ich tat einige schaut sich um und es sieht aus wie wbr nicht auf allen Browsern unterstützt wird. Vor allem IE8. Ich habe dies selbst allerdings nicht getestet. Vielleicht könnten Sie Überlauf benutzen. Versteckt als Backup oder so ähnlich