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插件。 就像名字所暗示的，它適合文本來填充的容器，這表現在這里 。 將兩個標頭都放在同一個div中，然后運行$("h1,h2").fitText(); 應該給它們相同的寬度。 查看他們的Github頁面以獲取更多示例。

Answer 2

這是一個僅使用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只是居中對齊。