Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Перенос текста (https://javascript.ru/forum/dom-window/30813-perenos-teksta.html)

fAmOus 16.08.2012 19:03

Перенос текста
 
Всем привет!
Помогите с реализацией идеи..
Вообщем есть block1 с текстом и block2 без текста, если в block1 больше 50 символов остальные символы которые не вместились переходили в block2.
Заранее спасибо.

lord2kim 16.08.2012 19:11

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);
  }
}

fAmOus 16.08.2012 19:28

lord2kim,
Спасибо, был один баг не переносил 1 букву "исправил".
А можно ли сделать чтобы переносил слова?
Слово не вместилось и переносит.. как-то так

Aetae 16.08.2012 22:15

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);
  }
}

bes 16.08.2012 23:03

https://developer.mozilla.org/en-US/...ay/lastIndexOf,
здесь пишут, что поддержка lastIndexOf, начиная с IE9, хотя проверил, работает и в 7, 8 , по ходу блажанули

bes 16.08.2012 23:40

ха-ха, тупнул, сразу на таблицу глянул, на большее не хватило :haha:

fAmOus 16.08.2012 23:48

Всё работает замечательно только я не учел один нюанс :)
Вообщем блоков с 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>

fAmOus 17.08.2012 00:13

Дзен-трансгуманист,
Отредактировал.. а если так?

fAmOus 17.08.2012 02:01

Дзен-трансгуманист,
Благодарю :)

bes 17.08.2012 08:36

<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.