Задать вопрос

Как можно корректно обрезать текст, чтоб несколько строк оставалось?

Как можно корректно обрезать текст, чтоб несколько строк оставалось?
  • Вопрос задан
  • 160 просмотров
Подписаться 3 Оценить Комментировать
Помогут разобраться в теме Все курсы
  • Нетология
    Веб-разработчик с нуля: профессия с выбором специализации
    14 месяцев
    Далее
  • Академия Эдюсон
    Frontend-разработчик: тариф PRO
    10 месяцев
    Далее
  • ProductStar × РБК
    Профессия: Инженер по тестированию + ИИ
    6 месяцев
    Далее
Пригласить эксперта
Ответы на вопрос 1
PretorDH
@PretorDH
HTML5, CSS3, PHP, JS - люблю в чистом виде.
Вот посмотрите пример виджета с многострочной обрезкой.
JSfiddle

Самое главное правильно посчитать высоту строк. Это удобно делать в em.

Например: У вас есть стандартный шрифт в пикселях в документе установленый ТОЛЬКО один раз в теге html. Блоки разметки header, footer, aside, колонок и секций его не меняют. Шрифт меняется только внутренними элентами разметочных блоков.

Высоту блоков выставляете в em кратно line-height.

Меняете его только в единицах em/rem. И коректируете высоту line-height по формуле:
FSn / LHo = LHn,
где
FSn - новый font-size;
LHо - старый line-height;
LHn - новый line-height;

Кроме этого, если хотите чтобы верстка выглядела типографически верно (строки колонок совпадали на всей странице), нужно аккуратно соблюдать кратность отступов margin и padding к высоте строки.
Ответ написан
Комментировать
Ваш ответ на вопрос

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

Похожие вопросы