line-height 标题中的长标题（多行）

Question

我正在用 css 创建一个 H1 标题，并向其中添加了一个 line-height，因此 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; }

正如您在 fiddle 示例中看到的那样，普通标题（单行）运行完美。当它是一个长标题时，行距太远（因为我设置了line-height）。

另外，第二行没有像第一行那样在左边填充。另一个问题是左上角的白色小三角形。标题多行时下移

任何人都知道我如何以干净的方式解决这个问题，最好只使用 CSS？

Answer 1

你把line-height设置为44px，大概这样单行就是44px。

所以，为什么不使用顶部和底部填充而不是行高

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>

line-height 标题中的长标题（多行）

Long title (multiple lines) in heading with line-height

html

css

html-heading