1. Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела
    Скрыть объявление

[Помогите] Как сделать нормальные padding при переносе строки

Тема в разделе "Вёрстка (HTML, CSS)", создана пользователем AlexGood, 3 июл 2019.

  1. AlexGood

    AlexGood

    Регистрация:
    28 ноя 2016
    Сообщения:
    254
    Симпатии:
    7
    Подскажите такое дело. У меня есть блок с текстом, ему назначен padding. При адаптации происходит перенос текста на другую строку, и край зарезается по самую букву. При этом line-height должен остаться между строками.
    Для понимания прикладываю скрин: http://prntscr.com/oa6x0s :Help::Help::Help:
     
  2. Dotrox

    Dotrox Команда форума

    Регистрация:
    27 ноя 2012
    Сообщения:
    3.198
    Симпатии:
    1.306
    Блок инлайновый, так что он режется на строки вместе с текстом, потому паддинг не срабатывает.
    Но если сделать не инлайновым, пропадут промежутки между строками. Если они не нужны - это решение, если нужны - надо экспериментировать вживую.
     
    AlexGood нравится это.
  3. AlexGood

    AlexGood

    Регистрация:
    28 ноя 2016
    Сообщения:
    254
    Симпатии:
    7
    в том то и дело что надо отступы между строк (
    а так вот такая беда получается: http://prntscr.com/oad5pi
     
  4. AlexGood

    AlexGood

    Регистрация:
    28 ноя 2016
    Сообщения:
    254
    Симпатии:
    7
    можно ли как-то задать padding для каждого слова в блоке?

    залил на хостинг этот блок, чтобы можно было посмотреть что и как когда меняешь разрешение: http://test.dtraduga.vh55.hosterby.com/
     
    Последнее редактирование: 4 июл 2019
  5. Dotrox

    Dotrox Команда форума

    Регистрация:
    27 ноя 2012
    Сообщения:
    3.198
    Симпатии:
    1.306
    В общем, вот решение:
    Код:
    box-decoration-break: clone;
    Но с поддержкой в браузерах у него не всё гладко: https://caniuse.com/#feat=css-boxdecorationbreak
    Кроме Мозиллы все требуют префикс, а ИЕ и Эдж не поддерживают вообще. Точнее, Эдж поддерживать начал только после перехода на движок Хрома, а это только последняя версия.

    Но это свойство как раз то, что нужно, оно именно для таких случаев и предназначено.
     
    AlexGood нравится это.
  6. AlexGood

    AlexGood

    Регистрация:
    28 ноя 2016
    Сообщения:
    254
    Симпатии:
    7
    решил задачу обернув каждое слово в span и сделав им margin-left отрицательный, чтобы убрать отсупы между словами, а при изменении разрешения медиками просто менял размер текста