Фон только под текстом

356

01 июля 2017, 10:36

Как сделать фон именно под текстом, не покрывая пространство между строк.

Answer 1

Так по умолчанию происходит со всеми строчными элементами:

span { 
  line-height: 2em; 
  background: antiquewhite; 
}

<span>Как сделать фон именно под текстом, не покрывая пространство между строк. 
Как сделать фон именно под текстом, не покрывая пространство между строк. </span>

Answer 2

http://jsfiddle.net/bz8yq/

.ColorRed{ 
   background: red; 
   }

<span  class = "ColorRed">blablalbalbalba blablabla bla blablalbablablalbalbalbablablalbalbalbablablalbalbalba 
  blablalbalbalbablablalbal<br>balbablablalbalbalbablablalbalbalbablablalbalbalbablablalbalbalbablablalbalbalba<br>blablalbalbalbablablalbalbalbablablalbalbalbablablalbalbalba 
  <br>blablalbalbalbablablalbalbalbablablalbalbalbablablalbalbalbablablalbalbalbablablalbalbalbablablalbalbalbablablalbalbalba<br></span>

Answer 3

Если нужно соблюсти высоту строк, отступы и padding у строк, то:

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>

В Chrome и Opera все ок, но в firefox работает не совсем корректно. В остальных не стал првоерять. Как вариант - разделять каждую строку на элементы, прописывать display:inline-block и дальше делать что угодно