Как применять стили CSS только для текста

Question

Я пытаюсь применить стиль к тексту HTML. То, что я хочу, это в основном:

Что я получаю в основном:

Как вы можете видеть, первая строка с отступом, но не какой-либо другой линии. До сих пор у меня есть текст внутри <span>, который находится внутри <div>.

.slide-text .text { 
 
    background-color: rgba(0, 0, 0, .6); 
 
    color: #FFF; 
 
    padding: 8px 17px; 
 
} 
 
.slide-text .slide-title { 
 
    font-family: "Titillium Web", Arial, Helvetica, sans-serif; 
 
    font-weight: 700; 
 
} 
 
.slide-text .slide-content { 
 
    font-family: "Open Sans", Arial, Helvetica, sans-serif; 
 
    font-weight: 500; 
 
}

My HTML code is: 
 
<div class="slide-text"> 
 
    <div class="slide-title"><span class="text">[TITLE]</span> 
 
    </div> 
 
    <div class="slide-content"><span class="text">[TEXT]</span> 
 
    </div> 
 
</div>

Они отлично работают, до тех пор, как ни название или содержание более чем одна строка. Как только они пройдут две или более линии, пролет теряет внутреннюю прокладку. Изменение внутреннего интервала на display: inline-block; дает ему отображение блока, как только оно переходит в две строки. Есть ли способ получить эффект, который я ищу?

Answer 1

У гуру CSS Криса Койера есть статья о CSS-трюках listing several methods to solve this. Один из методов - один с box-shadow. Это уже упоминается как ответ, но ему нужно еще больше любить работать в современном Firefox :).

.multi-line-padded { 
 
    background: black; 
 
    color: white; 
 
    
 
    /* For the top and bottom padding */ 
 
    padding: 0.5em 0; 
 
    
 
    /* Text height (1.0) + compensate for padding (0.5 * 2) */ 
 
    line-height: 2; 
 
    
 
    /* For the left and right padding */ 
 
    /* Vendor prefixes FIRST */ 
 
    -webkit-box-shadow: 1em 0 0 black, -1em 0 0 black; 
 
    -moz-box-shadow: 1em 0 0 black, -1em 0 0 black; 
 
    box-shadow: 1em 0 0 black, -1em 0 0 black; 
 
    
 
    /* Firefox defaults to `box-decoration-break: split`, we need `clone` */ 
 
    box-decoration-break: clone; 
 
}

<p><span class="multi-line-padded">You think water moves fast? You should see ice. It moves like it has a mind. Like it knows it killed the world once and got a taste for murder.</span></p> 
 

 
<p style="text-align: right;"><span class="multi-line-padded"><a href="http://slipsum.com/" style="color: white;">Samuel L. Ipsum</a></span></p>

Answer 2

Попробуйте следовать примеру в лучшем ответе this similar question. По сути, он предлагает использовать тень для создания прокладки.

span { 
    background:#ff0;color:#000; 
    box-shadow:0.2em 0 0 #ff0,-0.2em 0 0 #ff0; 
    -moz-box-shadow:0.2em 0 0 #ff0,-0.2em 0 0 #ff0; 
    -webkit-box-shadow:0.2em 0 0 #ff0,-0.2em 0 0 #ff0; 
} 

будет отступ всего текста в равной степени и добавить желтый отступы (изменить #ff0 любого значение HTML цвета вам нужно). Однако вам придется переформатировать существующий код, поскольку он будет отступать дальше тени.