Multi same-width line multisized HTML text? [duplicate]

Question

A designer did a very nice design that's pretty hard to me to apply. It's to be applied to Wordpress posts titles so it should work with any text.

So before I turn her idea off, I'll check SO up :).

Titles should be multiline, one or more words per line. Lines will be splitted using PHP according to a given algorithm that counts characters into as even as possible lines, to look like this:

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

Each line's font-size should be adjusted so it's width equals the full width (fixed) of the h1 box. Also, some neggative line-spacing will be used. It should look like this:

I can afford to use CSS3 and JS on this.

Answer 1

I posted the question after trying a couple of plugins that didn't do the job very well. But then I tried 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();

Here's a JFiddle to see it in action.