Мы будем использовать простой и удобный плагин — Ellipsis.js. Выше есть видео, если не устраивает текст — можете глянуть его :)

Ранее я использовал плагин dotdotdot.js, и вы наверняка пришли сюда по ссылке на него, но сейчас не использую jQuery и не советую вам, поэтому - плагин на чистом js.

Давайте по порядку, с html.

HTML

<p class="clamp">
Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. То языкового, агентство не буквоград щеке своих,
проектах несколько прямо семантика на берегу коварных текстами пустился страна всемогущая пунктуация ты ведущими назад, дорогу предложения
грамматики пор? Ручеек возвращайся назад осталось семантика эта она дал речью взгляд себя проектах? Свой бросил дорогу ipsum возвращайся жизни
которое, заглавных всеми необходимыми коварных выйти послушавшись безопасную алфавит решила текста сих залетают домах назад правилами
повстречался lorem. Все коварных залетают грамматики пояс лучше ведущими меня, по всей ручеек деревни страна домах алфавит рыбного
подпоясал живет не города курсивных прямо маленькая обеспечивает рыбными там скатился моей? Инициал, даже?
</p>

Тут у нас простой параграф с классом .clamp. Этот класс написан не случайно, его плагин использует по умолчанию. Теперь давайте подключим плагин и напишем js-код

JS

Ellipsis();

Вот такой простейший код нужен, чтобы плагин уже работал. Использование класса .clamp и данного кода делает обрезание по двум строчкам. Демка

Плагин автоматически поймет, если вы добавите и большее количество элементов с данным классом, поэтому переживать нечего.

Но что, если мы хотим сделать другой класс, или что-либо еще? У плагина есть небольшое, но достаточное количество настроек. Рассмотрим на примере кода:

Ellipsis({
ellipsis: '…', // символ, который добавится после обрезанного текста
debounce: 300, // задержка изменения обрезания при сжатии сайта (для оптимизации)
responsive: true, // адаптивно обрезать текст или нет
className: '.text', // класс для элемента
lines: 4, // сколько линий должно быть видно
portrait: null, // тут можно передать количество линий для портретного режима
break_word: false // определять, как обрезать текст - оставлять обрезанное слово или нет
});

Очень простой плагин, который действительно круто работает и не требует от вас каких-то ухищрений в подключении. Пользуйтесь! Ниже - ссылка на github, где есть демо-кода, а в начале статьи - видео обзор плагина для вашего удобства.

До встречи!