Перенос текста
Всем привет!
Помогите с реализацией идеи.. Вообщем есть 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, время: 18:20. |