Форум Сайтостроение Веб-строительство

Как обрезать текст (а конкретнее ссылки)

12
Василич#
На сайте с 10.03.2009
Offline
111
Василич#
2335

Здравствуйте, может кто поделится решением, всю голову поломал.

Есть ссылки вида:

<a href="/ssilka.html">Анатолий Васильев</a>, <a href="/ssilka.html">Андрей Власенко</a>, <a href="/ssilka.html">Виктория Герасимова</a>, <a href="/ssilka.html">Дарья Повереннова</a>, <a href="/ssilka.html">Захар Ронжин</a>, <a href="/ssilka.html">Илья Соколовский</a>, <a href="/ssilka.html">Николай Сердцев</a>, <a href="/ssilka.html">Раиса Рязанова</a>, <a href="/ssilka.html">Татьяна Гуляева</a>, <a href="/ssilka.html">Ярослав Бойко</a>

Как обрезать текст, допустим до 100 символов, чтобы при этом появилась ссылка "далее", при нажатии на которую, появлялся весь текст ?

Пробовал разные jquery плагины, в т.ч. jTruncate, но дело в том что они за символы считают и саму ссылку (т.е. a href=....).

Если кто подскажет решение, буду очень и очень благодарен !

bmw-power.com.ua (https://bmw-power.com.ua)
М
На сайте с 08.02.2006
Offline
59
Магнат
#1

На JQuery как-то так


$(document).ready(function(){
	$('a').each(function(){
		var href = $(this);
		var linktxt = href.html();
		if(linktxt.length>=100) {
			href.html(linktxt.substr(0,100));
			href.append(
				$('<button>Далее</button>').on('click',function(){
					href.html(linktxt);
					return false;
				});
			);
		}
	});
});
Василич#
На сайте с 10.03.2009
Offline
111
Василич#
#2

Магнат, большущее спасибо за ответ ! Только не совсем понял как вызвать данную функцию на странице, не могли бы Вы описать детальнее ? Заранее большущее спасибо !

Robin_Bad
На сайте с 24.12.2007
Offline
85
Robin_Bad
#3
Василич#:
Магнат, большущее спасибо за ответ ! Только не совсем понял как вызвать данную функцию на странице, не могли бы Вы описать детальнее ? Заранее большущее спасибо !

в данном случае функция сама запустится сразу после загрузки страницы у пользователя

Василич#
На сайте с 10.03.2009
Offline
111
Василич#
#4

Robin_Bad, спасибо за ответ.

Я это понял, но мне нужно, чтобы обрезался определённый текст, который я заключу в определённый div и пропишу ему id или class :)

Robin_Bad
На сайте с 24.12.2007
Offline
85
Robin_Bad
#5
Василич#:
Robin_Bad, спасибо за ответ.
Я это понял, но мне нужно, чтобы обрезался определённый текст, который я заключу в определённый div и пропишу ему id или class :)

Вы не знакомы с jQuery-селекторами? В приведённом Магнат примере часть кода: 

$('a')

является селектором, но туда можно подставить и любой другой. Например, для некого DIV с id="div_id": 

$('div#div_id')

если не очень понятно, почитайте вот это.

Василич#
На сайте с 10.03.2009
Offline
111
Василич#
#6

Спасибо, пошаманив с данным кодом, понял что он не работает.

Вставил в <head></head> страницы:

<script type="text/javascript">
$(document).ready(function(){
$('div#fulltext').each(function(){
var href = $(this);
var linktxt = href.html();
if(linktxt.length>=100) {
href.html(linktxt.substr(0,100));
href.append(
$('<button>Далее</button>').on('click',function(){
href.html(linktxt);
return false;
});
);
}
});
});
</script>

Текст заключил в тэг div:


<div id="fulltext">
<a href="/ssilka.html">Анатолий Васильев</a>, <a href="/ssilka.html">Андрей Власенко</a>, <a href="/ssilka.html">Виктория Герасимова</a>, <a href="/ssilka.html">Дарья Повереннова</a>, <a href="/ssilka.html">Захар Ронжин</a>, <a href="/ssilka.html">Илья Соколовский</a>, <a href="/ssilka.html">Николай Сердцев</a>, <a href="/ssilka.html">Раиса Рязанова</a>, <a href="/ssilka.html">Татьяна Гуляева</a>, <a href="/ssilka.html">Ярослав Бойко</a>
</div>

ничего не происходит, текст не обрезается, и не происходит каких-либо действий :( Библиотека jquery подключена.

Пожалуйста, помогите, ну очень надо !

Конструктор в Директе научился WordPress 5.6 может нарушить WordPress 5.5 может нарушать
4arger
На сайте с 17.12.2008
Offline
95
4arger
#7 

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

</head>



<body>

<div id="fulltext">

<a href="/ssilka.html">Анатолий Васильев</a>, <a href="/ssilka.html">Андрей Власенко</a>, <a href="/ssilka.html">Виктория Герасимова</a>, <a href="/ssilka.html">Дарья Повереннова</a>, <a href="/ssilka.html">Захар Ронжин</a>, <a href="/ssilka.html">Илья Соколовский</a>, <a href="/ssilka.html">Николай Сердцев</a>, <a href="/ssilka.html">Раиса Рязанова</a>, <a href="/ssilka.html">Татьяна Гуляева</a>, <a href="/ssilka.html">Ярослав Бойко</a>

</div>



<script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>

<script>

$(document).ready(function() {

	(function() {

		var max_len = 100;

		var div = $('#fulltext');

		var fulltext = div.text();

		var fullhtml = div.html();

		if (fulltext.length > max_len) {

			var shorttext = fulltext.substr(0, max_len);

			shorttext = $.trim(shorttext);

			div.html(shorttext + '[&hellip;]' + ' <a id="fulltext-more" href="#">Далее &rarr;</a>');

		}

		

		$('#fulltext-more').on('click', function() {

			div.html(fullhtml);

			return false;

		});

	})();

});

</script>

</body>

</html>

как-то так

Василич#
На сайте с 10.03.2009
Offline
111
Василич#
#8

4arger, супер ! Огромное спасибо ! Заработало ! И оформили то, что надо))) И заодно назрел еще один вопрос:

Как сделать чтобы ссылки, которые до "далее" были активными, ато они отображаются просто как текст) Если можно конечно)

Яндекс запустил поиск по Из-за бага в интерфейсе В конструкторе Директа появилась
Robin_Bad
На сайте с 24.12.2007
Offline
85
Robin_Bad
#9

вам нужно обрезать весь текст до 100 символов или каждую ссылку?

4arger
На сайте с 17.12.2008
Offline
95
4arger
#10 

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<style>

.fulltext .shorttext {

	width: 800px;

	overflow: hidden;

	white-space: nowrap;

	text-overflow: ellipsis;

	float: left;

	margin-right: 5px;

}

</style>

</head>



<body>

<div>Some content</div>

<div class="fulltext">

<a href="/ssilka.html">Анатолий Васильев</a>, <a href="/ssilka.html">Андрей Власенко</a>, <a href="/ssilka.html">Виктория Герасимова</a>, <a href="/ssilka.html">Дарья Повереннова</a>, <a href="/ssilka.html">Захар Ронжин</a>, <a href="/ssilka.html">Илья Соколовский</a>, <a href="/ssilka.html">Николай Сердцев</a>, <a href="/ssilka.html">Раиса Рязанова</a>, <a href="/ssilka.html">Татьяна Гуляева</a>, <a href="/ssilka.html">Ярослав Бойко</a>

</div>

<div>Some content</div>

<div class="fulltext">

<a href="/ssilka.html">Анатолий Васильев</a>, <a href="/ssilka.html">Андрей Власенко</a>, <a href="/ssilka.html">Виктория Герасимова</a>, <a href="/ssilka.html">Дарья Повереннова</a>, <a href="/ssilka.html">Захар Ронжин</a>, <a href="/ssilka.html">Илья Соколовский</a>, <a href="/ssilka.html">Николай Сердцев</a>, <a href="/ssilka.html">Раиса Рязанова</a>, <a href="/ssilka.html">Татьяна Гуляева</a>, <a href="/ssilka.html">Ярослав Бойко</a>

</div>

<div>Some content</div>

<div class="fulltext">

<a href="/ssilka.html">Анатолий Васильев</a>, <a href="/ssilka.html">Андрей Власенко</a>

</div>

<div>Some content</div>

<div class="fulltext">

<a href="/ssilka.html">Анатолий Васильев</a>, <a href="/ssilka.html">Андрей Власенко</a>, <a href="/ssilka.html">Виктория Герасимова</a>, <a href="/ssilka.html">Дарья Повереннова</a>, <a href="/ssilka.html">Захар Ронжин</a>, <a href="/ssilka.html">Илья Соколовский</a>, <a href="/ssilka.html">Николай Сердцев</a>, <a href="/ssilka.html">Раиса Рязанова</a>, <a href="/ssilka.html">Татьяна Гуляева</a>, <a href="/ssilka.html">Ярослав Бойко</a>

</div>

<div>Some content</div>



<script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>

<script>

$(document).ready(function() {

	(function() {

		var max_len = 100;

		$('.fulltext').each(function() {

			var div = $(this);

			var fullhtml = div.html();

			if (div.text().length > max_len) {

				div.html('<div class="shorttext">' + fullhtml + '</div><div><a class="more" href="#">Далее &rarr;</a></div>');

			}

			div.find('.more').on('click', function() {

				var a = $(this);

				a.closest('.fulltext').html(fullhtml);

				return false;

			});

		});

	})();

});

</script>

</body>

</html>

конечно, не супер решение, но у меня других идей нету((( надо будет CSS еще подправить под нужную ширину блока.

---------- Добавлено 19.09.2012 в 00:09 ----------

все id заменил на class

Яндекс добавил рекламный блок В Рекламной сети Яндекса В Яндекс.Вебмастере появился упрощённый
12

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий