Как узнать длину строки, ограниченной шириной блока и размером шрифта?
Здравствуйте. Суть проблемы в следующем. Есть прописанный в html div с текстом. Посредством JS нужно создать такой же блок, скопировать этот текст, но каждую строку вывести в отдельном блоке. Т.е. когда браузер автоматически делает перенос строки для текста исходного блока, в новом блоке - это не перенос строки, а отдельный блок. Соответственно, если меняется текст в исходном блоке, то автоматически меняются и блоки, созданные посредством JS. И/или если меняется размер шрифта (вместе с которым меняется и длина строки в браузере), то автоматически меняется размер шрифта и размер строки, помещенной в итоговый отдельный div.
Я прошу не готового решения, а лишь указания на какие-нибудь методы решения этой задачи. Оба блока имеют фиксированную width: 600px и изначальный шрифт 22px. Я, возможно, не там копаю, но, может быть есть какой-то метод определения, если можно так выразиться, потенциальной длины строки, выводимой в браузере, которая зависит от ширины блока и размера шрифта? Или это все фигня и нужно думать в другом направлении? Я могу клонировать текст, могу разбить его на отдельные слова и поместить эти слова в массив. Но когда дело доходит до перебора массива, впадаю в ступор и не понимаю, как именно перебирать этот массив, и что вообще с ним делать, чтобы добиться результата.
Для большей наглядности: допустим, браузер выводит текст блока в таком виде:
test test test test
test test test test
В исходном блоке - это один сплошной текст в div, а надо скопировать его в другой блок так, чтобы каждая строка была отдельным div'ом.
Странная и сумбурная задача, но, надеюсь, донес свою мысль)
))))) Я и говорю - странная сумбурная фигня)) На самом деле, это одна из тестовых задач перед собеседованием. У нее нет какого-то практического применения (хотя, может, и есть, но мне сложно представить, как и где это может понадобиться). По всей видимости, просто проверка, насколько далеко может зайти изощренный ум программиста.
может они просто не хотят ни кого брать на работу?? А так, хер его знает. Какая то не понятная математика, получать длину всей строки, делить на 600px, полученное число отрезать от строки, создать див, вставить, оставшуюся строку тоже самое. Я не могу :D
Сразу скажу, что я не знаю, как такое реализовать надёжно, но вот что-то такое получится, если попытаться решить задачу тем же способом, что и Уилл Паттерсон.
Суть в том, что после каждого слова вставляется пустой span. Далее происходит проверка в цикле: если верхний отступ текущего span равен отступу первого в строке span, значит текущее слово относится к текущей строке. Если больше - к следующей.
Колбэк, который передаётся аргументом в метод forEachTextLine, на входе получает 1) номер строки, 2) текст строки и 3) последний пустой span в этой строке.
Простой