So wenden Sie CSS-Stile nur auf Text an

Question

Ich versuche, einen Stil auf einen ähnlichen HTML-Text anzuwenden. Was ich will, ist im Grunde:

Was bekomme ich ist im Grunde:

Wie Sie sehen können, wird die erste Zeile eingerückt, aber keine andere Linie. Bisher habe ich den Text innerhalb einer <span>, die innerhalb einer <div> verschachtelt ist.

.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>

Sie große Arbeit, solange weder der Titel oder der Inhalt mehr als eine Zeile ist. Sobald sie über zwei oder mehr Linien gehen, verliert die Spannweite ihre innere Polsterung. Wenn Sie die innere Spannweite auf display: inline-block; ändern, wird eine Blockanzeige angezeigt, sobald sie in zwei Zeilen wechselt. Gibt es eine Möglichkeit, den gewünschten Effekt zu erzielen?

Answer 1

Der CSS-Guru Chris Coyier hat einen Artikel über CSS-Tricks listing several methods to solve this. Eine Methode ist die mit box-shadow. Es wird bereits als Antwort erwähnt, aber es braucht etwas mehr Liebe, um im modernen Firefox zu arbeiten :).

.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

Versuchen Sie, das Beispiel in der besten Antwort zu this similar question zu folgen. Im Wesentlichen wird vorgeschlagen, einen Box-Shadow zu verwenden, um Padding zu erstellen.

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; 
} 

werden alle Ihre Text einrücken gleichermaßen und fügen gelbe Polsterung (die #ff0 zu jedem beliebigen HTML-Farbwert ändern Sie benötigen). Sie müssen den vorhandenen Code jedoch neu formatieren, da er weiter als der Schatten eingerückt wird.