Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Обрезание строки (https://javascript.ru/forum/misc/10823-obrezanie-stroki.html)

Tregan 22.07.2010 17:50

Обрезание строки
 
Добрый день столкнулся с такой проблемой. Незнаю как это зделать может поможете.

Дан блок блоку дан фиксированный размер. в этом блоке идет текст. в блоке вмешается например 50символов текста. сам вопрос как зделать так чтобы текст который бы привешал 50символов. не начил расширять сам блок или переносить на другую строку текст.

Гдето видел что решили эту проблему с помощью троеточием. тоесть идет текст и доходя до границы блока начинает отображаться троеточием тем самым говоря что есть продолжения текста. как это можно воплотить в жизнь с помощью css. Или както по дргому?.

За рание спасибо.

exec 22.07.2010 17:54

if ( element.innerHTML.length > 50 ) {
	element.innerHTML = element.innerHTML.slice( 0, 50 ) + '…';
}

Tregan 22.07.2010 18:41

Спасибо, а можно по конкретний расписать код ато не сильно понимаю :( как обротится именно к блоку "perechen" в html коде.

<html>
<div id="perechen">
<P>тЕКС ТЕКС тЕКС ТЕКС тЕКС ТЕКС тЕКС ТЕКС </P>
</div>
</html>

Tregan 22.07.2010 18:43

Точней как зделать чтобы выше пречисленное правило действовала именно на определенный блок в html. Очень плохо разбираюсь в Js так что если можно показать подробний.

subzey 22.07.2010 18:48

Для этого предназначено свойство text-overflow: ellipsis, которое даже некоторые браузеры умеют:
<div style="width: 120px; white-space: nowrap; overflow: hidden;
	text-overflow:ellipsis;
	-o-text-overflow:ellipsis;
	-moz-text-overflow:ellipsis;
	-webkit-text-overflow:ellipsis;
	-ms-text-overflow:ellipsis;
">Lorem ipsum dolor sit amet</div>

Kolyaj 22.07.2010 18:50

Цитата:

Сообщение от subzey
-moz-text-overflow:ellipsis;

В Fx нет поддержки этого свойства.

Цитата:

Сообщение от subzey
-webkit-text-overflow:ellipsis;
-ms-text-overflow:ellipsis;

IE и WebKit понимают его без префикса. Собственно IE его первым реализовал.

Так что достаточно
-o-text-overflow: ellipsis;
text-overflow: ellipsis;

Tregan 22.07.2010 18:55

Мне не надо реалтзовывать это с помощью css мне надо с помощью js. почему не с помощью css так как было с казоно что оно НЕКОТРЫМИ браузерами подержуется. А надо сохранить подержку всех браузеров. Обьясните плиз как это добится с помощью JS. За рание благодарин.

subzey 22.07.2010 18:59

Tregan,
а вот теперь Вы можете задать вопрос Гуглу:
«text-overflow Firefox»

Tregan 22.07.2010 19:12

Хватит разводить базар. я попросил если можите обьяснить с помощью JS а не спомощью css php и.тд. Даже сайт соответствующий javascript.ru!
Еслибы мне надобыло бы с помощью css то я бы и зашол на соотвествующий форум.

exec 22.07.2010 20:28

Vulkan, не будет работать.

Вот так правильно:

(function () {
	var node = document.getElementById( "perechen" ),
	need = 50;
	if ( node.innerHTML.length > need ) {
		node.innerHTML = node.innerHTML.slice( 0, need ) + "…";
	}
})();


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