Polsterung für zweizeilige Überschrift

Das ist etwas schwierig zu erklären. Wenn jemand einen besseren Titel dafür kennt, ändern Sie ihn bitte.

Ich möchte eine Blackbox hinter meine Überschrift zeichnen. Ich mache das mit einer Zeitspanne innerhalb des h-Tags. Es muss ein wenig nach links und rechts gepolstert werden. Mein Layout reagiert, sodass die Überschrift wahrscheinlich in zwei Zeilen unterteilt ist.

    <div class="headline-black">
        <h1 class="entry-title">
             <span>Some very, very long headline, that is very, very long.</span>
        </h1>
    </div>


h1 span {
    background: none repeat scroll 0 0 #000000;
    line-height:44px;
    padding:7px 25px 8px 25px;
}

.headline-black h1 {
    color: #FFFFFF;
    font-size: 22px;
}

Das Problem: Die Polsterung wirkt sich nur auf das Ende und den Anfang der Spanne aus. Wo die Überschrift unterbrochen ist, berührt der Buchstabe den Rand des Kästchens.

Ich hoffe das ist verständlich. Hier ist die Geige. Versuche das Fenster klein zu machen und beobachte, wie es sich verhält.

http://jsfiddle.net/832u8/2/

Bearbeiten: Ich möchte, dass es wie der Text geformt wird. Wie Sie es mit einem Filzstift markieren würden. Aber mit Polsterung für jede Zeile.

Antworten auf die Frage(5)

Ihre Antwort auf die Frage