Langer Titel (mehrere Zeilen) in Überschrift mit Zeilenhöhe

Question

Ich erstelle einen H1-Titel mit CSS und fügte eine Zeilenhöhe hinzu, so dass das H1-Element die richtige Höhe hat und der Text vertikal zentriert ist.

Das Problem ist mit langen Titeln, die mehrere Zeilen benötigen.

Ein Beispiel ist bei jsfiddle erstellt: https://jsfiddle.net/wygpfbm3/

HTML:

<h1> 
This is a normal title 
</h1> 


<h1> 
This is a very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very long title 
</h1> 

CSS:

h1 { background-color: #ebebeb; border: 1px solid #c7c7c7; border-left: none; border-right: none; top: 0px; line-height: 44px; font-size: 18px; font-weight: normal; color: #3e3e3e; } 
h1:before { content: ''; background-color: transparent; border: 6px solid #c7c7c7; border-color: #c7c7c7 transparent transparent #c7c7c7; float: left; } 
h1:after { content: ''; border: 6px solid #fff; border-color: #fff transparent transparent #fff; float: left; margin-left: -12px; margin-top: -1px; } 

Wie Sie in der Geige Beispiel ein normaler Titel (einzeilig) sehen kann funktioniert perfekt. Wenn es ein langer Titel ist, sind die Linien zu weit auseinander (weil ich die Zeilenhöhe einstelle).

Auch die zweite Zeile hat nicht die Polsterung auf der linken Seite wie die erste Zeile. Ein anderes Problem ist mit dem kleinen weißen Dreieck in der oberen linken Ecke. Es wird nach unten bewegt, wenn der Titel mehrere Zeilen lang ist.

Wer weiß, wie ich das auf eine saubere Art lösen kann, bevorzugt nur mit CSS?

Answer 1

Sie legen die Zeilenhöhe auf 44px, vermutlich so, dass es 44px als eine einzige Zeile ist.

Anstatt also mit line-height warum nicht oben & unten padding anstelle

44px - 18px (font-size)/2 = 13px padding

h1 { 
 
    background-color: #ebebeb; 
 
    border: 1px solid #c7c7c7; 
 
    border-left: none; 
 
    border-right: none; 
 
    padding: 13px 0px; 
 
    font-size: 18px; 
 
    font-weight: normal; 
 
    color: #3e3e3e; 
 
    width: 80%; 
 
    margin: 3em; 
 
    position: relative; 
 
} 
 
h1::after { 
 
    content: ''; 
 
    position: absolute; 
 
    top: -1px; 
 
    left: 0; 
 
    border-width: 6px; 
 
    border-style: solid; 
 
    border-color: white transparent transparent white; 
 
} 
 
h1::before { 
 
    content: ''; 
 
    position: absolute; 
 
    border-width: 6px; 
 
    border-style: solid; 
 
    border-color: #c7c7c7 transparent transparent #c7c7c7; 
 
    top: 0; 
 
    left: 1px; 
 
}

<h1> 
 
This is a normal title 
 
</h1> 
 

 

 
<h1> 
 
This is a very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very long title 
 
</h1>