Перед началом использования подключаем скрипты:
<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 вы можете ознакомиться в разделе «демо».
