Adding padding for text

Question

In the following example the heading text is on several lines. Is it somehow possible to add the left and right padding on each line (without wrapping each word in a different element, of course)?

If not possible with CSS only, can it be done with jQuery?

HTML:

<div class="wrap">
<h1>Donec commodo sapien lectus, nec gravida magna</h1> 
</div>

CSS:

.wrap{
    width: 100px;
}

h1{
    display:inline;
    background:green;
    color:#fff;
}

Demo: http://jsfiddle.net/289oo48b/

Answer 1

By adding one container (span for example) element for the content of the h1:

HTML:

<div class="wrap">
    <h1>
        <span>Donec commodo sapien lectus, nec gravida magna</span>
    </h1>
</div>

And using following CSS:

.wrap {
    width: 100px;
    line-height: 1.3;
    padding: 2px 0; 
    border-left: 20px solid green;
    margin: 20px 0;
}

h1 {
    display:inline;
    background:green;
    color:#fff;
    padding: 4px 0;
    margin: 0;
}

span {
    position: relative;
    left: -10px; 
}

JSFiddle: https://jsfiddle.net/anini/rwLenu6w/

Answer 2

.wrap{
    width: 100px;
}

h1{
    display: inline-block;
    white-space: pre-wrap;
    color:#fff;
    padding: 0 10px;
    background: green;
    word-spacing: 100px;
}

fiddle: http://jsfiddle.net/a56kap9L/