Обрезать и скрыть часть строки в JavaScript

Если стандартной JavaScript функции substring() Вам уже недостаточно, то обратите внимание на предлагаемый jQuery плагин. Он позволяет обрезать и скрыть часть строки, отображение которой контролируется добавляемым переключателем. Учтено и наличие троеточия. В общем, если тема для Вас актуально, предлагаю разобраться подробнее.

В своём блоге я уже рассказывал о том, как можно сделать открывающийся текст на чистом JavaScript или с использованием jQuery. Но решил не довольствоваться достигнутым и написать более интересный и продвинутый, с моей точки зрения, jQuery плагин, который назвал cutString. Предлагаю опустить остальную лирику и перейти непосредственно к примеру его использования:

<div class="cutstring" data-display="none" data-max-length="10" data-show-text="show»" data-hide-text="«hide">Example of a long line to be cut.</div>

Как Вы видите, для большей широты манёвра, я решил воспользоваться data- атрибутами, введёнными в HTML5. В частности, используется четыре основных атрибута:

  • data-display – начальное значение: «none» или пусто - CSS-свойства display скрываемой части строки. Если атрибут не указан, используется значение «none».
  • data-max-length – максимальная длина строки. Если строка больше этого значения, лишнее обрезается и скрывается. Если атрибут не указан, используется значение, соответствующее 20% от длинны строки.
  • data-show-text – текст переключателя, когда обрезанная часть строки скрыта (например: показать). Если атрибут не указан, используется значение «show».
  • data-hide-text – текст переключателя, когда обрезанная часть строки отображается (например: скрыть). Если атрибут не указан, используется значение «hide».

Для того чтобы это всё заработало вам нужно сделать следующее:

  1. Скачайте плагин cutString по этой (Google Диск) или этой (Яндекс.Диск) ссылке и разархивируйте файл cutstring.js на сервер.
  2. На странице сайта надо подключить jQuery библиотеку и скрипт плагина, например:

<script src="/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="/2014/04/js/cutstring.js"></script>

  1. Далее нам надо инициализировать плагин для соответствующих элементов страницы сайта, например:

<script>
$(function() {
  $('.cutstring').cutstring();
});
</script>

В данном случае действие плагина распространяется на элементы страницы сайта с классом cutstring.

Ну а теперь, для того чтобы лучше понять, как это всё работает, приведу тот HTML-код, в который превращается наша строка:

<div class="cutstring" data-display="none" data-max-length="10" data-show-text="show»" data-hide-text="«hide">Example of<span style="display: none;" class="cutstring-suffix"> a long line to be cut.</span><span class="cutstring-hellip">… </span><span class="cutstring-toggle">show»</span></div>

Как Вы видите, он начинается с видимой части строки, например: Example of. Далее идёт обрезанная и скрываемая часть строки cutstring-suffix. Следующий элемент cutstring-hellip предназначен для добавления троеточия в том случае, если обрезанная часть строки скрыта. Ну и заканчивается всё переключателем cutstring-toggle.

Таким образом, вы можете достаточно легко контролировать внешнее оформление такой строки. Я же приведу лишь простейшее оформление переключателя в виде псевдоссылки:

.cutstring-toggle {
  color: blue;
  text-decoration: underline;
  cursor: hand;
  cursor: pointer;
}

Здорово? Просмотреть живой пример Вы можете, проследовав по этой ссылке.

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

Стоит отметить и то, что для решения подобных задач обычно используют CSS-свойство overflow, но оно рассчитано не столько на количество символов, сколько на размер элемента.

В любом случае, у Вас есть выбор. На этом у меня всё. Спасибо за внимание. Удачи!