多个相同宽度的多行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。

超文本标记语言

<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，可以看到它的实际效果。