Как я могу измерить, сколько символов будет соответствовать ширине документа?

Question

Мне нужно написать в JavaScript (я использую jQuery) функцию, которая знает о количестве символов, которые помещаются в строке окна браузера. Я использую моноширинный шрифт, чтобы облегчить проблему, но было бы лучше, если бы я обобщил его для разных шрифтов.

Как узнать, сколько символов будет заполнять строку в браузере? Намерение состоит в том, чтобы посчитать количество символов, заполняющих строку.

Answer 1

Вы можете создавать элемент и добавлять к нему символы, пока не обнаружите перенос, например, наблюдая за изменениями в offsetHeight (вы можете оптимизировать его, используя алгоритм деления пополам).

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

Следовательно, в большинстве случаев это может быть излишним, а при плохом внедрении создавать больше проблем, чем решить.

Существуют и другие решения, например, если вы хотите, чтобы была видна только одна строка, вы можете использовать white-space:nowrap и overflow:hidden, а в некоторых браузерах text-overflow:ellipsis, чтобы сделать текст аккуратно. Или, если вы не хотите обрезать слова, используйте 1-строчный контейнер с overflow:hidden.

Answer 2

Вы можете получить общую ширину, доступную для браузера, с помощью

window.innerWidth

И тогда вы можете получить ширину элемента следующим методом.

document.getElemenById('elem').clientWidth  

Answer 3

Нет простого способа сделать это в HTML.

Однако, если вы действительно должны знать, вы, вероятно, можете понять это с помощью какого-то действительно ужасного javascript:

Сначала создайте

с нужной шириной, вставьте несколько символов и запросите его .height () в пикселях. Затем продолжайте добавлять к нему символы и проверяйте .height (), когда высота

изменится, вы знаете, что она выросла в соответствии с новой строкой текста.