Вычислите, сколько символов (из строки) поместится в элемент div без его переноса?

Question

Итак, у меня есть <div></div>.Я хочу знать, сколько (в длину) строки поместится в нее, прежде чем она будет перенесена на следующую строку.Скрипт должен учитывать ширину элемента (действительное clientWidth), левый и правый поля, а также левый и правый отступы.

<div id="stackoverflow"></div>

И JavaScript, при условии, что магическая функция равна calculate:

calculate("#stackoverflow","the string to be inputed to the div");
// That should either output how much of the string fits in the div
// or the string's length if it fits without wrapping.

Селектор #stackoverflow не важен, его проще понять.

На данный момент моя единственная идея - создать цикл while, который добавляетсимвол в div и затем проверяет, был ли div обернут, и если нет, продолжите и т. д., то верните количество символов, но это занимает слишком много времени!

Честно говоря, мне все равно, использует ли ответ jQuery, так какЯ могу в значительной степени перевести это на простой JS без какой-либо боли.

Answer 1

Ваш метод хорош, но его можно оптимизировать:

Вы можете сделать копию div вне экрана (и как непосредственный потомок тела), чтобы свести к минимуму повторы и перерисовки.

Также начните с оценки количества символов, измеряя ширину, скажем, 5 символов (чем больше, тем лучше оценка) и разделите clientWidth на эту ширину.Затем вы можете добавлять / вычитать символы оттуда.Если вы делаете это для нескольких элементов div одинаковой ширины, то кэшируйте предыдущее значение в качестве начальной оценки для следующей строки.

Answer 2

В ваших знаниях и контроле слишком много деталей, из-за которых может возникнуть что-то кроме запроса браузера. Но если вы хотите ускорить его, самое простое - выполнить бинарный поиск, чтобы выяснить, где находится div. Это будет на порядок лучше решения, которое вы говорите слишком медленно.