0

У меня есть блок с текстом, ему назначен padding. При адаптации происходит перенос текста на другую строку, и край зарезается по самую букву. При этом line-height должен остаться между строками.

Для понимания прикладываю скрин:

Можно ли как-то сделать padding для каждого слова или как-то иначе реализовать данную задачу?

5
  • помоему нет. разделите фразы на составляющие и шаманьте медиа-запросами
    – Za Ars
    4 июл 2019 в 16:46
  • 1
    А при адаптации не возникла идея уменьшить и размер текста?
    – Air
    4 июл 2019 в 16:48
  • @ZaArs, медиазапросы на подгонку спанов под текст - это какая-то жесть. Особенно если локализация понадобится.
    – Qwertiy
    4 июл 2019 в 20:51
  • @Air, а чем тебе перенос не угодил?
    – Qwertiy
    4 июл 2019 в 20:51
  • @Qwertiy, так это ни мне не угодил, а автору вопроса...
    – Air
    5 июл 2019 в 2:01

3 ответа 3

4

Слова придётся обернуть в span'ы, но решение такое.
Обязательно чтобы ширина не становилась меньше самого длинного слова.

div {
  font-size: 2em;
  width: 7em;
  outline: 1px dotted red;
  line-height: 1.5em;
  animation: width-change 10s linear infinite alternate;
}

.text {
  background: silver;
  box-shadow: 2em 0 0 silver;
}

.word {
  display: inline-block;
  padding: 0 1em;
}

.spc {
  display: inline-block;
  margin: 0 -1em;
}

@keyframes width-change {
  from { width: 7em; }
  to { width: 15em; }
}
<div>
  <span class=text>
    <span class=word>Some</span><span class=spc></span>
    <span class=word>interesting</span><span class=spc></span>
    <span class=word>list</span><span class=spc></span>
    <span class=word>of</span><span class=spc></span>
    <span class=word>words</span><span class=spc></span>
  </span>
</div>

Правда, есть некоторые косяки:

  • Chrome 75, Edge 18 - всё идеально
  • FF 67 - нет тени, серый фон кончается на 2em левее, чем надо
  • IE 11 - размытие тени в 1px вместо 0, небольшой зазор между тенью и фоном, текст вылезает за пределы блока на 2em (последнее должно устраняться padding'ом)
2
  • ♦ прекрасный пример демонстрации своей идеи 4 июл 2019 в 21:10
  • 1
    @Alexandr_TT, я вот кроссбраузерность проверил - оказалось, не везде работает...
    – Qwertiy
    4 июл 2019 в 21:12
0

Обернул каждое слово в спан, спану задал margin-left:7px; чтобы отступы между словами скрыть и потом медиками уменьшал размер текста, и все получилось нормально

-2

Оберните span в какой-нибуть контейнер, типа div, назначте bg диву и падинг тоже, уберите bg и padding в span.введите сюда описание изображения

6
  • но нужен вот такой результат: prntscr.com/oan265 4 июл 2019 в 17:03
  • Хорошо, тогда заверните каждое отдельное слово в спан.
    – Alexandr
    4 июл 2019 в 17:13
  • Удалите ответы и внесите правку в вопрос.
    – doox911
    4 июл 2019 в 18:45
  • 2
    @doox911, я сделал :)
    – Qwertiy
    4 июл 2019 в 20:48
  • 1
    обернул каждое слово в спан, спану задал margin-left:7px; - чтобы отступы между словами скрыть и потом медиками уменьшал азмер текста, и все получилось нормально 5 июл 2019 в 8:10

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.