Text in einem Absatz unterteilt

Question

Ich habe versucht, meinen Text in einem schwarzen Hintergrund Absatz mit weißen Linien geteilt zu haben. Es gelang mir mit Text-Dekoration unterstreichen; Das einzige Problem ist, dass es sich nicht auf die volle Breite ausdehnt und es ist nicht perfekt für die letzte Zeile. Gibt es eine andere Lösung? Danke Jungs

dies ist, wie es

http://codepen.io/HendrikEng/pen/LkXjWo

HTML aussehen sollte:

<h1 class="o-outline--black">Lorem Ipsum impsum psuspspspspsp</h1> 

CSS:

.o-outline--black { 
    width: 30%; 
    display: block; 
    text-transform: uppercase; 
    padding: 0.15em 0.6em 0.15em 0.6em; 
    background: black; 
    color: white; 
    text-decoration: underline; 
} 

Answer 1

Sie können einen linearen Gradienten verwenden, um die Wirkung sind Sie nach zu bekommen:

.o-outline--black { 
 
    width: 30%; 
 
    text-transform: uppercase; 
 
    text-align: center; 
 
    padding: 0.15em 0.6em 0.15em 0.6em; 
 
    background: black; 
 
    color: white; 
 
    background-image: repeating-linear-gradient(180deg, transparent, transparent 35px, white 35px, white 40px); 
 
}

<h1 class="o-outline--black">Lorem Ipsum impsum psuspspspspsp</h1>

Sie können die Pixelwerte, um die Linien genau dort zu positionieren, wo Sie sie benötigen.

Answer 2

display: inline; kann Ihr Problem beheben. Auf diese Weise wird der Schwarze BG nur dort sein, wo der Text ist.

-EDIT-

Um zu erzwingen, den Text brechen Sie <br> auf die Wörter hinzufügen können Sie wollen. Und um sich auf das Zentrum auszurichten margin: auto;

http://codepen.io/sandrina-p/pen/AXmoxJ

Answer 3

Sie sollten diese in der Lage sein, stattdessen zu tun:

.o-outline--black { 
/*width: 40%;*/ 
display: block; 
text-transform: uppercase; 
padding: 0.15em 0em; 
    background: black; 
    color: white; 
    /*text-decoration: underline;*/ 
text-align:center; 
margin:0px; 
padding:0px; 
} 

.line 
{ 
    width:100%; 
    border-bottom:15px solid #ffffff; 
} 

<h1 class="o-outline--black underline"> 
<div class="line">marken-und</div> 
<div class="line">packungsdesign. seit</div> 
<div class="line">1997.</div> 
</h1> 


<h1 class="o-outline--black underline">marken-und<br>packungsdesign. seit<br>1997.</h1>