見出しの長いタイトル（複数行）

Question

私はcssでH1タイトルを作成し、これに行の高さを追加しているため、H1要素の高さが正しく、テキストが垂直にセンタリングされています。

問題は、複数の行が必要な長いタイトルの場合です。

例はjsfiddleで作成されます。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; } 

あなたはフィドルの例でわかるように、通常のタイトル（単線）完璧に働いています。長いタイトルでは、線が離れすぎています（線の高さを設定しているため）。

また、2行目には、1行目のように左側にパディングがありません。別の問題は、左上の小さな白い三角形です。タイトルが複数行になると、下に移動します。

私はこれをどのようにクリーンな方法で解決できますか？

Answer 1

ラインの高さを44pxに設定します。これはおそらく1本のラインとして44pxになるように設定されています。 18px（フォントサイズ）/ 2 = 13pxパディング

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>