Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Найти переносы строки (https://javascript.ru/forum/events/15890-najjti-perenosy-stroki.html)

why.not? 17.03.2011 23:26

Найти переносы строки
 
Здравствуйте. Выдалась не очень простая задача по анимированию текста и ее решение требует нахождения всех автоматических переносов строки
Например, у нас есть контейнер
<div style="width:200px;"><span>очень длинный текст про что-то такое вот эдакое, ну и я не знаю что еще написать</span></div>

Текст в спане перенесется на следующую строку по границе слов, вот как бы мне найти места переноса?
Думал, что браузер вставляет что-то вроде "\n", но нифига. Возможно ли это сделать каким-либо простым методом, или нужно обернуть каждое слово в дополнительный спан и сверять его вертикальное смещение от предыдущего?

ksa 18.03.2011 09:18

why.not?, если шрифт моноширный, можно использовать ширину символа и количество символов в самом элементе...
Если нет - наверное только спаны. Причем "спанить" нужно не только слова, но и пробелы между ними. Они ведь так же занимают место...

Вот еще почитай...
http://javascript.ru/forum/misc/1425...tvo-strok.html

рони 18.03.2011 10:16

why.not?,
Вариант ....
<div style="width:200px;" id="show" ><span>очень длинный текст про что-то такое вот эдакое, ну и я не знаю что еще написать</span></div>
<script type="text/javascript">
var div = document.getElementById('show');
var data = div.childNodes[0].childNodes[0].data;
var arr = data.match(/\s*\S+/g)
div.childNodes[0].childNodes[0].data = arr[0]
var h = div.clientHeight
for (var i = 1; i < arr.length; i++) {
    div.childNodes[0].childNodes[0].data += arr[i]
    if (div.clientHeight > h) {
        arr[i] = arr[i].replace(/\s*/, '<font color="#FF0000"> тут перенос )))</font><br />')
        h = div.clientHeight
    }
}
document.write(arr.join(''))
</script>


Часовой пояс GMT +3, время: 13:09.