Длинное название (несколько строк) в заголовке с высотой строки

Question

Я создаю заголовок H1 с помощью css и добавляю ему высоту строки, поэтому элемент 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; } 

Как вы можете видеть в скрипку, например, нормальное название (одна строка) работает отлично. Когда это длинное название, линии слишком далеко друг от друга (потому что я установил высоту линии).

Также вторая строка не имеет прокладки слева, как первая строка. Другая проблема связана с небольшим белым треугольником в верхнем левом углу. Он перемещается вниз, когда заголовок имеет несколько строк.

Кто-нибудь знает, как я могу решить это по-своему, предпочитая только CSS?

Answer 1

Вы устанавливаете высоту линии до 44 пикселей, предположительно так, чтобы она составляла 44 пикселя в виде одной строки.

Таким образом, вместо того, чтобы использовать высоту строки, почему бы не использовать верхние & нижние отступы вместо

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>