@fruneen

Как скрыть лишний текст?

Здравствуйте коллеги, нужна ваша помощь, есть блок фиксированной высоты, как убрать лишний текст, выходящий за пределы блока, и добавить гиперссылку в конце, по типу "подробнее", "далее" и т.д.. Прошу учесть то, что блоков с текстом произвольное количество и у них всех одинаковый класс.
Также даю ссылку на JsFiddle https://jsfiddle.net/t8xcLf2k/1/

Дополнение:
- Желательно без сторонних плагинов
- Что-то по типу этого
5d5e97a0cbf2b092265275.jpeg
  • Вопрос задан
  • 2441 просмотр
Решения вопроса 1
Пригласить эксперта
Ответы на вопрос 5
У line-clamp хорошая поддержка (кроме IE, конечно))
Ответ написан
@bogomazov_vadim
Если нужно сделать на стороне фронта, то можно посмотреть в сторону dotdotdot-js
Ответ написан
Комментировать
anton_reut
@anton_reut
Начинающий веб-разработчик
Лучше это делать на серверной стороне на стадии вывода текста. CSS и прочие overflow: hidden это костыли.
Ответ написан
vahe_2000
@vahe_2000
вот css вариант

jsfiddle

.text {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  line-height: 16px; /* fallback */
  max-height: 32px; /* fallback */
  -webkit-line-clamp: 2; /* number of lines to show */
  -webkit-box-orient: vertical;
}


<div class="text">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam consectetur
  venenatis blandit. Praesent vehicula, libero non pretium vulputate, lacus arcu
  facilisis lectus, sed feugiat tellus nulla eu dolor. Nulla porta bibendum
  lectus quis euismod. Aliquam volutpat ultricies porttitor. Cras risus nisi,
  accumsan vel cursus ut, sollicitudin vitae dolor. Fusce scelerisque eleifend
  lectus in bibendum. Suspendisse lacinia egestas felis a volutpat.
</div>
Ответ написан
@SeltonSoer
Вообще это очень нетривиальная фигня) Если есть возможность, то пускай бэк это реализует) На стороне фронта это достаточно тяжело сделать адекватно
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
19 апр. 2024, в 03:52
1000 руб./за проект
19 апр. 2024, в 03:01
1000 руб./за проект
18 апр. 2024, в 21:56
2000 руб./за проект