Ich versuche, die Gesamtbreite einer Spanne in HTML zu berechnen, die die linken und rechten Peilungen des ersten und des letzten Zeichens enthält. Ich habe bereits Javascript offsetWidth und jQuery's width & amp; outwardWidth-Funktionen, aber keiner von ihnen gibt den richtigen Wert zurück, nach dem ich suche. Hier ist ein Beispiel von dem, was ich meine. In Firefox läuft die berechnete Breite 135px, während die Messung mit dem Web Developer Plug-in eine tatsächliche Breite von 141px ergibt.
Bearbeiten
Hier ist, was ich versucht habe, und hier sind die Werte, die es mir gibt: OffsetWidth = 135 jQuery.width () = 135 jQuery.outerWidth () = 135
Keiner von ihnen berechnet den 6px-Überhang auf dem 'f' (was die Breite 141 ergeben würde).
Leider gibt es keine einfache Lösung, da außerhalb des Bereichs des Boxmodells liegt - der Browser selbst erkennt den Überhang des Buchstabens "f" beim Rendern des Layouts nicht. Sie können dies für sich selbst sehen, wenn Sie die <span> innerhalb einer <div> von width: 135px und overflow: auto umbrechen. - Es werden keine Bildlaufleisten angezeigt, der Überhang wird einfach abgeschnitten. Dies ist auch der Grund, warum der Feuerwächter die Breite ohne Überhang meldet.
Wie @Aaron herausfand, gibt es das Problem nicht bei Schriften mit einem festen Abstand, da in diesen Schriften keine Buchstaben über das Feld mit der festen Breite des Zeichens hinausreichen.
Die einzige Möglichkeit, die tatsächliche Breite zu finden, besteht in pixelbasierten (statt layoutbasierten) Methoden. Ich kann mir eine Möglichkeit vorstellen: Zeichne denselben Text mit der gleichen Schriftart auf ein <canvas> -Element und messe die Pixelbreite auf diese Weise.
Eigentlich glaube ich, das Problem ist die Schriftart selbst. Ich habe jsfiddle in font-family: monospace geändert, und alles war in der grauen Box enthalten (und als Ergebnis korrekt berechnet). Auch wenn es als Originalschriftart beibehalten wurde, aber das Sample in "aaa" oder "mmmm" geändert wurde, hat super funktioniert. Es ist nur die "f" Glyphe in dieser Schriftart, die es für Sie bläst.
Leider kenne ich kein DOM-Attribut, das dafür verantwortlich ist. Ich bin mir nicht sicher, ob das eine große Antwort ist, aber ich habe keinen Zugang zu der Frage und dachte, dass diese Ergebnisse Ihnen helfen könnten, in die richtige Richtung zu weisen ...
Tags und Links javascript html width measurement