Форум

Tregan · #1 (**permalink**) 22.07.2010, 17:50

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

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

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

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

exec · #2 (**permalink**) 22.07.2010, 17:54

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

Tregan · #3 (**permalink**) 22.07.2010, 18:41

Спасибо, а можно по конкретний расписать код ато не сильно понимаю

как обротится именно к блоку "perechen" в html коде.

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

Tregan · #4 (**permalink**) 22.07.2010, 18:43

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

subzey · #5 (**permalink**) 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 · #6 (**permalink**) 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 · #7 (**permalink**) 22.07.2010, 18:55

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

subzey · #8 (**permalink**) 22.07.2010, 18:59

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

Tregan · #9 (**permalink**) 22.07.2010, 19:12

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

exec · #10 (**permalink**) 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 ) + "…";
	}
})();

Форум

Справочник

Discord чат

Курсы javascript