H2文本宽度低于h1文本

Question

所以我有这个HTML代码：

<div>
    <h1>My h1 title</h1>
    <h2>This is my h2 text which needs to be center aligned and in the same time not to pass the h1 title width</h2>
</div>

我希望这个块看起来像只使用css：

说明：我的h1将具有更大的字体大小，而我的h2将具有更小的字体。我希望我的h2将在div中居中对齐，div应该具有我的h1文本的宽度。 （h1应保持在1行而不是很多）

我怎样才能做到这一点？感谢

Answer 1

您可以尝试一个名为FitText.js的jQuery插件。顾名思义，它适合填充容器的文本，如here所示。将两个标头放在同一个div中并运行$("h1,h2").fitText();应该给它们相同的宽度。查看他们的Github page了解更多示例。

Answer 2

这里有一个非常简单的（hacky）方式来实现这一目标只有CSS：

http://codepen.io/anon/pen/waJKGw

div {
  margin:0 auto;
  width:300px;
  text-align:center
}
h1 {
  text-align:justify;
  text-align-last: justify;
  display:block;
  margin-bottom:0;
}
h1:after {
  content: "";
  display: inline-block;
  width: 100%;
  height:0;
}

H1有理由填写div容器的整个宽度。意思是如果你的div很宽并且你的h1文本很短，你会得到一些非常丑陋的东西 - 但是这样你就可以搞清楚了与您的内容。

然后H2恰好居中对齐。