Перенос текста
Всем привет!
Помогите с реализацией идеи.. Вообщем есть block1 с текстом и block2 без текста, если в block1 больше 50 символов остальные символы которые не вместились переходили в block2. Заранее спасибо. |
fAmOus, самое простое, но наверняка есть решение получше
window.onload = function () { var block1 = document.getElementById("block1"), block2 = document.getElementById("block2"), text = block1.innerHTML; if (text.length > 50) { block1.innerHTML = text.substr(0, 49); block2.innerHTML = text.substr(50, text.length); } } |
lord2kim,
Спасибо, был один баг не переносил 1 букву "исправил". А можно ли сделать чтобы переносил слова? Слово не вместилось и переносит.. как-то так |
window.onload = function () { var block1 = document.getElementById("block1"), block2 = document.getElementById("block2"), text = block1.innerHTML, pos = text.lastIndexOf(' ', 51); if (text.length > 50) { block1.innerHTML = text.substring(0, pos); block2.innerHTML = text.substring(pos+1); } } |
https://developer.mozilla.org/en-US/...ay/lastIndexOf,
здесь пишут, что поддержка lastIndexOf, начиная с IE9, хотя проверил, работает и в 7, 8 , по ходу блажанули |
ха-ха, тупнул, сразу на таблицу глянул, на большее не хватило :haha:
|
Всё работает замечательно только я не учел один нюанс :)
Вообщем блоков с id "content-last-screams" много, нужно чтобы каждый "content-last-screams" переносил свои не влезающие слова в блок "content-last-screams-load". Выглядит примерно так: <div id="content-last-screams1" class="content-last-screams"> - Вообщем блоков с id "content-last-screams" много, нужно чтобы каждый "content-last-screams" переносил свои не влезающие слова в блок "content-last-screams-load".</div> <div id="content-last-screams-load1" class="content-last-screams-load"></div> <div id="content-last-screams2" class="content-last-screams"> - Вообщем есть block1 с текстом и block2 без текста, если в block1 больше 50 символов остальные символы которые не вместились переходили в block2.</div> <div id="content-last-screams-load2" class="content-last-screams-load"></div> <div id="content-last-screams3" class="content-last-screams"> - Спасибо, был один баг не переносил 1 букву "исправил". А можно ли сделать чтобы переносил слова? Слово не вместилось и переносит.. как-то так</div> <div id="content-last-screams3" class="content-last-screams-load"></div> |
Дзен-трансгуманист,
Отредактировал.. а если так? |
Дзен-трансгуманист,
Благодарю :) |
<style> .textBegin { color: green; } .textEnd { color: lightgreen; } </style> <div class="textBegin"> - Вообщем блоков с id "content-last-screams" много, нужно чтобы каждый "content-last-screams" переносил свои не влезающие слова в блок "content-last-screams-load". </div> <div class="textEnd"></div> <div class="textBegin"> - Вообщем есть block1 с текстом и block2 без текста, если в block1 больше 50 символов остальные символы которые не вместились переходили в block2. </div> <div class="textEnd"></div> <div class="textBegin"> - Спасибо, был один баг не переносил 1 букву "исправил". А можно ли сделать чтобы переносил слова? Слово не вместилось и переносит.. как-то так </div> <div class="textEnd"></div> <script> window.onload = function () { if (!document.getElementsByClassName) { document.getElementsByClassName = function (nameOfClass) { var mas = []; var elements = this.getElementsByTagName('*'); var len = elements.length; for (var i = 0; i < len; i++) { if (elements[i].className == nameOfClass) { mas.push(elements[i]); } } return mas; } } function setBreak(elem1, elem2) { var n = 50; var text = elem1.innerHTML; if (text.length > n) { var pos = text.lastIndexOf(' ', n + 1); elem1.innerHTML = text.substring(0, pos); elem2.innerHTML = text.substring(pos + 1); } } var elems1 = document.getElementsByClassName('textBegin'); var elems2 = document.getElementsByClassName('textEnd'); var len = elems1.length; for (var i = 0; i < len; i++) { setBreak (elems1[i], elems2[i]); } } </script> PS: или через querySelectorAll |
Часовой пояс GMT +3, время: 14:27. |