jQuery плагин dotdotdot - обрезка длинного текста

29 ноября 2014 Антон Кулешов 5332 0

Сегодня пойдет речь об инструменте, который позволяет с помощью jQuery обрезать длинный текст до нужного размера. Причем, в результате мы получаем не просто блок с текстом «сколько влезло – столько влезло», а лаконично законченный отрывок длинного текста с тремя точками в конце, указывающими на продолжение. Ко всему, это - довольно распространённая задача. Чаще всего ею занимаются в серверной части движка сайта. Но если вдруг вам потребуется выводить текст в зависимости от высоты блока, то тут может пригодиться плагин dotdotdot.

Реклама

Перед началом использования подключаем скрипты:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="jquery.dotdotdot.min.js" type="text/javascript"></script>

И вызываем новый метод к нужному блоку с текстом:

$(function(){
	$("#text").dotdotdot();
});

Dotdotdot работает непосредственно с высотой текста или блока, так что указывать длину не требуется. Ещё одно важное достоинство этого решения заключается в том, что при обрезке он не портит разметку страницы, так что смело можно вставлять текст с HTML элементами.

У плагина есть свой набор настроек, который поможет вам добиться нужного эффекта:

  • ellipsis – текст в конце строки («...»);
  • wrap – способ обрезки текста («word», «letter», «children»);
  • fallbackToLetter – обёртывание длинных слов (true, false);
  • after – jQuery селектор который стоит сохранить и поставить после ellipsis (null);
  • watch – учитывать изменения ширины блока, в котором текст (false, «window»);
  • height – указывается максимальная высота текста, если null, то она определяется от высоты блока;
  • tolerance – отключение опции height;
  • callback: function(isTruncated, orgContent) – вызывается после добавления ellipsis, получает два параметра статус обрезки (true, false) и обрезанный контент;
  • lastCharacter – содержит два параметра remove (указывается массив символов, которые стоит удалять в конце строки) и noEllipsis (массив символов которые не будут добавлены, если они содержатся в последних символах усеченного текста).

Вот так выглядят настройки по умолчанию:

$("#text").dotdotdot({
	ellipsis: "...",
	wrap: "word",
	fallbackToLetter: true,
	after: null,
	watch: false,
	height: null,
	tolerance: 0,
	callback: function(isTruncated, orgContent){},
	lastCharacter: {
		remove: [" ", ",", ";", ".", "!", "?"],
		noEllipsis: []
	}
});

Со всеми примерами работы dotdotdot вы можете ознакомиться в разделе «демо».

Реклама
Комментариев еще не оставлено
no_avatar
Читайте далее

Прячем загрузку за прелоадер

9 июня 2015 Антон Кулешов

Как бы ни выросла скорость интернета, а проблема с загрузкой тяжелый страниц по-прежнему актуальна, причем: чем быстрее у тебя соединение, тем больше тебя раздражают даже небольшие задержки (личный опыт каждого, я думаю). В корне решить эту проблему можно приложив недюжинные усилия по оптимизации сайта, но если проект существует уже несколько лет? Если им занимались уже несколько человек и не найти начала и конца? В данном случае нам на помощь приходят прелоадеры, прячущие медленную загрузку страницы за красивой картинкой.

1em или 16px

31 октября 2015 Антон Кулешов

1em – высота шрифта заданная в браузере по умолчанию или настроенная пользователем, и, на мой взгляд, начисто забытая верстальщиками, а зря! Конечно, на это есть и некоторые причины: пиксели привычнее, ощутимее и не зависят от настроек браузера. Вот мы и лепим их везде, борясь за то, чтобы наши проекты везде и всегда выглядели одинаково, только вопрос, а надо ли? Да, кроссбраузерность это хорошо и к этому надо стремиться, но согласитесь – рассматривать страничку в 1024рх на мониторе в 24 дюйма как-то совсем не очень, сайт сразу теряет свой колорит. Даже так называемая «резиновая» верстка не спасает ситуацию, а почему? Да потому, что хоть и задали ширины в процентах, а шрифты и отступы оставили в px, и таких примеров кучи!

Отслеживаем активность пользователя на странице

30 ноября 2014 Антон Кулешов

Сегодня мы рассмотрим способ определения активности пользователя на странице, и в этом нам поможет JavaScript библиотека ifvisible.