html - 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>

我希望这个 block 看起来像这个只使用 css 的 block :

说明:我的 h1 字体大小较大，而我的 h2 字体较小。我希望我的 h2 在 div 中居中对齐并且 div 应该具有我的 h1 文本的宽度。 (h1 应该留在 1 行而不是很多)

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

Answer 1

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