Как обрезать текст, поставив многоточие - dotdotdot плагин. | Блог веб-разработчика MaxGraph

Как обрезать текст, поставив многоточие — dotdotdot плагин.

Привет! Сегодня рассмотрим, как можно обрезать текст по его высоте, в конце подставив многоточие. А так же, посмотрим как можно реализовать кнопку "показать весь текст", это ведь тоже полезно =) Поехали.

Итак, плагин dotdotdot. Скачать его можете по ссылке: jquery.dotdotdot.min.js. Работает он довольно просто и в целом не нуждается в глобальном объяснении, поэтому мы перейдем сразу к горячему — к примерам) Начнем с простого

HTML

1
2
3
<div class="text-block" data-dot>
  Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Прямо скатился бросил образ даже осталось города большой свою подпоясал запятых до лучше составитель, текстами сбить на берегу агентство которой, одна страну рекламных даль решила предупредила сих, от всех деревни проектах. Пунктуация по всей повстречался страна большой свой домах решила! Диких, знаках языкового.
</div>
<div class="text-block" data-dot>
  Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Прямо скатился бросил образ даже осталось города большой свою подпоясал запятых до лучше составитель, текстами сбить на берегу агентство которой, одна страну рекламных даль решила предупредила сих, от всех деревни проектах. Пунктуация по всей повстречался страна большой свой домах решила! Диких, знаках языкового.
</div>

Простая разметка с текстом, ничего пока что примечательного.

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: sans-serif;
}
 
body {
  background-color: aqua;
  padding: 20px;
}
 
.text-block {
  max-width: 450px;
  height: 60px;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: sans-serif;
}

body {
  background-color: aqua;
  padding: 20px;
}

.text-block {
  max-width: 450px;
  height: 60px;
}

Здесь очень важно обертке текста дать высоту или max-высоту, иначе плагин просто не сработает.

JS

1
$('[data-dot]').dotdotdot();
$('[data-dot]').dotdotdot();

Максимально простой вызов, в целом никакие возможности плагина не нужны, он из под коробки делает что надо. Но вот дальше мы рассмотрим пример сложнее, с добавлением кнопки. Обновляем HTML.

HTML (new)

1
2
3
4
5
6
7
8
<div class="text">
  <p class="ellipsis-text">Всем привет! У меня египетский кальян Khalil Mamoon высотой 85 см., Мне нужен был лендинг для сбора заявок и рассылки писем по ним. Обратился за помощью к специалистам и Максим Мне нужен был лендинг для сбора заявок и рассылки писем по ним. Обратился за помощью к специалистам и Максим Мне нужен был лендинг для сбора заявок и рассылки писем по ним. Обратился за помощью к специалистам и Максим Мне нужен был лендинг для сбора заявок и рассылки писем по ним. Обратился за помощью к специалистам и Максим 
 
 
    <a class='more' href='javascript:void(0);'>Отзыв полностью</a>
    <a class='less' href='javascript:void(0);'>Скрыть отзыв</a>
  </p>
</div>
<div class="text">
  <p class="ellipsis-text">Всем привет! У меня египетский кальян Khalil Mamoon высотой 85 см., Мне нужен был лендинг для сбора заявок и рассылки писем по ним. Обратился за помощью к специалистам и Максим Мне нужен был лендинг для сбора заявок и рассылки писем по ним. Обратился за помощью к специалистам и Максим Мне нужен был лендинг для сбора заявок и рассылки писем по ним. Обратился за помощью к специалистам и Максим Мне нужен был лендинг для сбора заявок и рассылки писем по ним. Обратился за помощью к специалистам и Максим 


    <a class='more' href='javascript:void(0);'>Отзыв полностью</a>
    <a class='less' href='javascript:void(0);'>Скрыть отзыв</a>
  </p>
</div>

Чуть поменяли разметку, хотя div или p не принципиально. А вот наличие двух ссылок\или кнопок, кому как угодно) — обязательно.

CSS (new)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: sans-serif;
}
 
body {
  background-color: aqua;
  padding: 20px;
}
 
.text {
  margin-top: 30px;
  max-width: 500px;
}
 
.ellipsis-text {
  max-height: 75px;
}
 
.less {
  display: none;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: sans-serif;
}

body {
  background-color: aqua;
  padding: 20px;
}

.text {
  margin-top: 30px;
  max-width: 500px;
}

.ellipsis-text {
  max-height: 75px;
}

.less {
  display: none;
}

Здесь все несложно, мы задаем макс-высоту тексту и скрываем одну из кнопок (мы же должны видеть только «показать полностью»).

JS (new)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
$(function() {
  $("p.ellipsis-text").dotdotdot({
    after: 'a.more',
    callback: dotdotdotCallback
  });
 
  $("p.ellipsis-text").on('click','a',function() {
    if ($(this).hasClass('more')) {
      var div = $(this).closest('p.ellipsis-text');
      div.trigger('destroy').find('a.more').css('display','none');
      div.css('max-height', '100%');
      $("a.less", div).css('display','inline-block');
    }
    else {
      $(this).css('display','none');
      $(this).closest('p.ellipsis-text').css("max-height", "75px").dotdotdot({ after: "a.more", callback: dotdotdotCallback });
    }
  });
 
  function dotdotdotCallback(isTruncated, originalContent) {
    if (!isTruncated) {
      $("a", this).remove();   
    }
  }
});
$(function() {
  $("p.ellipsis-text").dotdotdot({
    after: 'a.more',
    callback: dotdotdotCallback
  });

  $("p.ellipsis-text").on('click','a',function() {
    if ($(this).hasClass('more')) {
      var div = $(this).closest('p.ellipsis-text');
      div.trigger('destroy').find('a.more').css('display','none');
      div.css('max-height', '100%');
      $("a.less", div).css('display','inline-block');
    }
    else {
      $(this).css('display','none');
      $(this).closest('p.ellipsis-text').css("max-height", "75px").dotdotdot({ after: "a.more", callback: dotdotdotCallback });
    }
  });

  function dotdotdotCallback(isTruncated, originalContent) {
    if (!isTruncated) {
      $("a", this).remove();   
    }
  }
});

Код усложнился.

  1. В вызове плагина мы должны указать параметр «after», чтобы ссылка отобразилась (иначе тоже может быть «скушана» плагином). И так же указываем callback-функцию, которая проверяет, если текст не свернут вообще изначально — удаляет обе ссылки из разметки. В общем, подстраховка.
  2. Далее у нас есть обработчик клика по ссылке внутри текста. Поскольку .less скрыта, мы кликаем на .more. Делаем точно проверку, что кликаем по ней. Внутри этой проверки находим текущий блок с текстом через closest() и дестроим (отключаем) плагин через trigger. Конечно, при этом сразу кнопку «показать полностью» скрывает и меняем max-height на 100%, чтобы текст не оставался подрезанным.
  3. В else пишем, что удаляем текущую нажатую кнопку и снова плагин запускаем (это как раз когда мы нажмем на «скрыть отзыв».

Вот собственно и все) Будут вопросы — пишите в комментарии или сразу в личку в вк.

 

Ну и пены:

Метки: , , , , , , ,

Понравилось? Оцени!
12345 (Пока оценок нет)
Загрузка...

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *