多个相同宽度的多行HTML文本？

Question

设计师做了一个非常好的设计，我很难申请。它应用于Wordpress帖子标题，因此它应该适用于任何文本。

所以在我关闭她的想法之前，我会检查SO：）。

标题应为多行，每行一个或多个单词。根据给定的算法，使用PHP对行进行分割，该算法将字符计数为尽可能均匀的行，如下所示：

<h1>
    <span>Lorem Ipsum</span>
    <span>Dolor Sit</span>
</h1>

应调整每一行font-size，使其宽度等于h1框的全宽（固定）。此外，将使用一些否定的line-spacing。它应该是这样的：

我可以在这上面使用CSS3和JS。

Answer 1

我在尝试了几个没有完成这项工作的插件后发布了这个问题。但后来我尝试了BigText。

HTML

<h1 id="bigtext">
     <div>Lorem Ipsum</div>
     <div>Dolor Sit</div>
</h1>

CSS

#bigtext {
  font-family:'Arial Black', sans-serif;
  text-align: center;
  width: 400px;
  margin: 60px auto;
  text-transform: uppercase;
  line-height: 0.75;
  letter-spacing: -3px;
}

JS

$("#bigtext").bigtext();

这是一个JFiddle，可以看到它的实际效果。