Получить длину строки в пикселях с помощью JavaScript

Допустим, у меня есть строка «Привет». Длина этой строки, очевидно, составляет пять символов, но какова ее длина в пикселях? Есть ли простой способ определить эту длину в JavaScript? Я подумал о решении, в котором пользователю нужно было бы отображать дополнительный div, но этот способ кажется хакерским и сложным.

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

Спасибо.


javascript text string pixels
person Gus    schedule 05.02.2011    source источник
comment
Вероятно, вам нужна ширина в пикселях элемента, содержимое которого представляет собой строку Hello. Я прав?   -  person Pablo Fernandez    schedule 06.02.2011
comment
Я предлагаю использовать моноширинный шрифт, тогда вы будете знать, сколько пробелов он занимает. ;) en.wikipedia.org/wiki/Monospaced_font   -  person JoeyRobichaud    schedule 06.02.2011
comment
@JoeRobich Я считаю, что Unicode отбрасывает предположение о 1 символе и 1 глифе :-)   -  person    schedule 06.02.2011

Ответы (3)


arrow_upward
2
arrow_downward

Вы можете определить количество пикселей в контейнере строки. Вы можете сделать это, создав скрытый элемент в DOM, установив внутренний HTML в строку, а затем запросив ширину.

person rcravens    schedule 05.02.2011
comment
Как узнать ширину? Я пробовал lbl.style.width и lbl.width, но это всегда неопределенное значение. - person Kingalione; 08.04.2013
comment
@NetMage для этого ответа не требуется jQuery, и он объясняет, как рассчитать ширину строки. - person Madbreaks; 10.10.2018
comment
@Madbreaks Понятия не имею, почему я это написал... :) - person NetMage; 10.10.2018

arrow_upward
2
arrow_downward

Я не думаю, что это хороший и простой способ сделать это, за исключением вычисления длины контейнера. Ширина зависит от размера шрифта, шрифта, межбуквенного интервала, она будет отличаться в зависимости от браузера и т. д.

person Robin    schedule 05.02.2011

arrow_upward
0
arrow_downward

Я использовал это для определения длины текста в пикселях (синтаксис jQuery):

var txtLen = $(<selector>).text().length * $(<selector>).css('font-size').slice(0,-2);

где selector — это то, что вы используете для нацеливания на конкретный элемент. При необходимости отрегулируйте (если размер шрифта не установлен в px).

Например:

var txtLen = $('table td').text().length * $('table td').css('font-size').slice(0,-2);

В реальной жизни это использовалось, когда мне нужно было определить, показывать ли всплывающую подсказку на td с фиксированной шириной - если td шире, чем его содержимое, нет необходимости показывать всплывающую подсказку.

Вещи, указанные в ответе Робина, по-прежнему применимы.

person FiddlingAway    schedule 25.01.2021