Как рассчитать общую ширину текста, включая левый и правый подшипник

Question

Я пытаюсь вычислить общую ширину пролета в HTML, включая левый и правый подшипники первого и последнего символов. Я уже пробовал Javascript функции offsetWidth и jQuery width & externalWidth, но ни одна из них не возвращает правильное значение, которое я ищу. Вот пример того, что я имею в виду. При работе в Firefox вычисленная ширина составляет 135 пикселей, а при измерении с помощью подключаемого модуля Web Developer фактическая ширина составляет 141 пикселей.

Редактировать

Вот что я пробовал, и вот значения, которые он мне дает: offsetWidth = 135 jQuery.width () = 135 jQuery.outerWidth () = 135

Никто из них не вычисляет 6-пиксельный свес на 'f' (что составляет ширину 141).

Answer 1

К сожалению, простого решения не существует, поскольку находится за пределами области блочной модели - сам браузер не распознает вылет буквы 'f' при рендеринге макета. Вы можете убедиться в этом сами, если обернуть <span> в <div> из width: 135px и overflow: auto - полосы прокрутки не появляются, вылет просто обрезается. Именно поэтому Firebug сообщает о ширине без навеса.

Как отметил @ Аарон, проблема не существует с моноширинными шрифтами, поскольку в этих шрифтах нет букв, выходящих за рамки фиксированной ширины символа.

Единственный способ узнать реальную ширину - это использовать пиксельные (а не макетные) методы. Я могу придумать один способ: нарисовать один и тот же текст с тем же шрифтом на элементе <canvas> и таким образом измерить ширину пикселя.

Answer 2

На самом деле, я думаю, что проблема в самом шрифте.Я изменил jsfiddle на font-family: monospace, и все это содержалось в сером поле (и в результате было рассчитано правильно).Даже оставив его как исходный шрифт, но изменив образец на «aaa» или «mmmm», он работал отлично.Это просто символ "f" в этом шрифте, который уносит его за вас.

К сожалению, я не знаю атрибута DOM, который объясняет это.Не уверен, что это большой ответ, но у меня нет доступа к комментариям по этому вопросу, и я подумал, что эти результаты могут помочь вам указать верное направление ...

Answer 3

Как насчет jQuery's .width()?

<span id="spanId"> ... </span>

и

var w = $('#spanId').width();