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

正如你在小提琴例子中看到的那样，正常的标题（单行）是完美的。当它是一个长标题时，线条相距太远（因为我设置了行高）。

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

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

Answer 1

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

所以，不要使用行高，为什么不使用top＆amp;底部填充

44px - 18px（font-size）/ 2 = 13px padding

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>

带有行高的标题中的长标题（多行）

1 个答案: