caramba caramba - 3 months ago 9
CSS Question

Style block element where each line has vertical gap and, except for the last line, is full width

I'm trying to create a title looking like this
desired result

I've tried a few things on https://jsfiddle.net/hx4m9kfa/ but

display: inline-block;
is as wrong as
display: block
or anything with
width: 100%




h1, h2, h3 {
background-color: orange;
margin: 0 0 10px 0;
font-size: 2em;
}
h2 {
display: inline-block;
background-color: green;
}

h3 {
background-color: purple;
}

<h1>
Lorem ipsum dolor sit amet, conset etur sadipscing elitr, sed diam nonumy eirmod
</h1>
<h2>
Lorem ipsum dolor sit amet, conset
</h2>
<h2>
etur sadipscing elitr, sed diam nonumy eirmod
</h2>
<h2>
nonumy eirmod
</h2>

<h3>
Lorem ipsum dolor sit amet, conset
</h3>
<h3>
etur sadipscing elitr, sed diam nonumy eirmod
</h3>
<h3>
nonumy eirmod
</h3>





I would prefer to have the entire title in only one tag (and if possible without JavaScript). But every result looking as the desired one will be much appreciated. Does anyone know how to achieve that? Thank you!

Answer

div {
  text-align:justify
}

h1 {
    color:#fff;
    background: #888888;    
    line-height: 1.3em;
    display:inline;
    -webkit-box-shadow: 10px 0 0 #888888, -10px 0 0 #888888;
    -moz-box-shadow: 10px 0 0 #888888, -10px 0 0 #888888;
    -ms-box-shadow: 10px 0 0 #888888, -10px 0 0 #888888;
    -o-box-shadow: 10px 0 0 #888888, -10px 0 0 #888888;
    box-shadow: 10px 0 0 #888888, -10px 0 0 #888888;   
}
<div>
    <h1>
    Lorem ipsum dolor sit amet, conset etur sadipscing elitr, sed diam   nonumy eirmod lorem ipsum dolor sit amet
    </h1>
</div>

Comments