Ограничение длины текста до n строк с помощью CSS

Чтобы ограничить количество отображаемых строк текста с помощью CSS, вы можете использовать следующий код:

.max-lines {
  display: block; /* или inline-block */
  text-overflow: ellipsis;
  word-wrap: break-word;
  overflow: hidden;
  max-height: 3.6em; /* Здесь 3.6em соответствует 2 строкам с line-height: 1.8em */
  line-height: 1.8em;
}

В HTML это будет выглядеть так:

<p class="max-lines">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vitae leo dapibus, accumsan lorem eleifend, pharetra quam. Quisque vestibulum commodo justo, eleifend mollis enim blandit eu. Aenean hendrerit nisl et elit maximus finibus. Suspendisse scelerisque consectetur nisl mollis scelerisque.</p>

В данном примере max-height устанавливается равным line-height умноженному на количество строк, которые вы хотите отобразить. То есть для выдачи 2 строк текста с расстоянием между ними в 1.8em, мы указываем max-height: 3.6em.

Да, данный CSS-класс .two-line-ellipsis ограничивает текст до двух строк и добавляет многоточие для обозначения переполненного текста. Вот как это работает:

.two-line-ellipsis {
  overflow: hidden; /* Скрывает переполненный текст */
  width: 100%; /* Задает ширину контейнера в 100% */
  display: -webkit-box; /* Устанавливает контейнер как flexbox для поддержки многострочного текста */
  -webkit-line-clamp: 2; /* Ограничивает количество строк до 2 */
  -webkit-box-orient: vertical; /* Указывает направление бокса вертикально */
}

Внутри вашего HTML-кода вы можете использовать этот класс, как показано ниже:

<div class="two-line-ellipsis">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in ex sit amet diam efficitur pellentesque. Mauris posuere scelerisque libero, nec pretium mauris molestie non. Nulla aliquam sollicitudin egestas. Fusce aliquet elit vitae mi volutpat vehicula.
  Vestibulum vel sapien enim. Nulla eu volutpat ex, ac faucibus urna. Etiam mattis rutrum ullamcorper. Ut sagittis, erat sit amet vulputate commodo, nisl lacus aliquet magna, vel condimentum ante felis rutrum nibh. Suspendisse ut lorem rutrum, molestie
  velit eget, hendrerit lorem. Vivamus rutrum nunc elit, nec lacinia risus viverra ut.
</div>

Обратите внимание, что данное решение в основном поддерживается в браузерах на базе WebKit (таких как Chrome и Safari). Если вы планируете использовать этот стиль в других браузерах, убедитесь, что они также поддерживают нужные вам стили.

На сегодняшний день, насколько я вижу, это возможно только с использованием height: (некое значение em); overflow: hidden, но даже в этом случае не будет красивого ... в конце.

Если это не подходит, я думаю, что без предварительной обработки на стороне сервера это невозможно (что затруднительно, потому что предсказать поток текста невозможно). Или же можно использовать jQuery (возможно, но, вероятно, довольно сложно).

Конечно! Если вы хотите использовать инлайн-стили в React для того, чтобы ограничить количество видимых строк текста с помощью обрезки, вы можете воспользоваться следующим примером:

<p
    style={{
        overflow: "hidden",
        textOverflow: "ellipsis",
        display: "-webkit-box",
        WebkitLineClamp: 2,
        WebkitBoxOrient: "vertical",
    }}
>
    Некоторый текст
</p>

В этом коде применяются стили для обрезки текста, чтобы у вас было отображено только две строки, а оставшаяся часть текста заменялась троеточием. Обратите внимание, что свойства lineClamp и WebkitLineClamp имеют особое значение, и рекомендуется использовать WebkitLineClamp для достижения наилучшего результата в современных браузерах.

Имейте в виду, что данный подход работает только в браузерах, которые поддерживают свойство -webkit-line-clamp, поэтому проверьте поддержку вашего целевого браузера.

Чтобы создать класс CSS, который обрезает текст и добавляет многоточие, вам нужно использовать сочетание свойств. Вот пример стиля, который вы можете применять к вашим элементам:

.class {
   word-break: break-word; /* Разбивает длинные слова, если они не помещаются в строку */
   overflow: hidden; /* Скрывает переполненный контент */
   text-overflow: ellipsis; /* Добавляет многоточие для обрезанного текста */
   display: -webkit-box; /* Устанавливает элемент как flex-контейнер для поддержки многоточия */
   line-height: 16px; /* Высота строки (резервное значение) */
   max-height: 32px; /* Максимальная высота (резервное значение) */
   -webkit-line-clamp: 2; /* Ограничивает видимые строки (здесь 2 строки) */
   -webkit-box-orient: vertical; /* Устанавливает ориентацию бокса вертикально */
}

Таким образом, используя этот класс, вы сможете ограничить количество видимых строк текста до двух, и любое дополнительное содержимое будет скрыто с добавлением многоточия. Обратите внимание, что для работы -webkit-line-clamp требуется использование свойства display: -webkit-box, поэтому это важно учитывать при применении стиля.