html - 带有行高的标题中的长标题(多行)

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; }

正如您在 fiddle 示例中所见，普通标题(单行)运行完美。当它是一个长标题时，行距太远(因为我设置了行高)。

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

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

Answer 1

您将行高设置为 44px，大概这样它作为单行将是 44px。

所以，为什么不使用 top & bottom padding 而不是使用 line-height

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>