首页 文章

带有行高的 Headers 中的长 Headers （多行）

提问于
浏览 次
0

我正在用css创建H1 Headers ，并为其添加了行高，因此H1元素具有正确的高度，文本垂直居中 .

问题在于长 Headers 需要多行 .

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

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

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

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

html css css3 html-heading

1 回答

  • 3

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

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

    44px - 18px（font-size）/ 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>
    回复于

相关问题