Hinzufügen von Füllzeichen für Text

Question

Im folgenden Beispiel befindet sich der Überschriftentext in mehreren Zeilen. Ist es irgendwie möglich, die linken und rechten Padding auf jeder Zeile hinzuzufügen (natürlich ohne jedes Wort in ein anderes Element zu verpacken)?

Wenn nicht möglich nur mit CSS, kann es mit jQuery getan werden?

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

Durch das Hinzufügen eines Behälters (span zum Beispiel) Element für den Inhalt der h1:

HTML:

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

Und mit folgenden 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

Meinst du Zeilenhöhe so? http://jsfiddle.net/qayuxsft/

line-height: 2em; 

oder

line-height: 200%; 

Änderung display: inline-display: block mit grün in den Räumen zu füllen.

Answer 3

.wrap{ 
    width: 100px; 
} 

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

Geige: http://jsfiddle.net/a56kap9L/