Перенос текста c фоном

243

17 июня 2017, 11:40

Есть вот такой элемент, который нужно сверстать:

Всегда верстал такие штуки, просто помещая каждую строку в отдельный тэг с display:inline-block, но сейчас возникла необходимость сделать это без разделения строки на элементы. Пробовал всему тексту прописывать display:inline, и все было бы хорошо, если бы высота строки не была больше размера текста (в данном случае у нас font-size:19px и line-height:29px). Ну и отступ между строками в 1 пиксель...

Подскажите, есть ли другой способ сверстать данный элемент без разделения на отдельные строки?

Заранее спасибо!

Answer 1

Вот так? Или размер и отступы должны быть именно 19 и 29 пикселей?

div { 
  max-width: 200px; 
} 
 
span { 
  font-family: sans-serif; 
  color: white; 
  box-shadow: -10px 0 0 black; 
  background: #000; 
  font-size: 19px; 
  line-height: 29px; 
  padding: 3px 10px 3px 0; 
  white-space: pre-wrap; 
}

<div><span>Длинный текст с переносом невмещающихся строк</span></div>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Float или position?

Имеется разметка:

289

HTML

Перенос текста c фоном

Float или position?

Раскопировать html документ с изменениями NodeJS

Объединение и разность отрезков

Загрузка файла в форму post запросом