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

Я создаю заголовок 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?


html css html-heading
person OsiriX    schedule 13.07.2016    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Вы устанавливаете высоту строки на 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>

person Paulie_D    schedule 13.07.2016
comment
Спасибо, это работает для проблемы с высотой строки, но не для угла среза в верхнем левом углу: jsfiddle.net/wygpfbm3/2 - person OsiriX; 13.07.2016
comment
Тем не менее, исправил это для вас. - person Paulie_D; 13.07.2016