Multi-line multi-line text with the same width?

Question

The designer made a very nice design, which is very difficult for me to apply. It will apply to Wordpress headers so that it works with any text.

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

Headings should be multi-line, with one or more words per line. Lines will be split using PHP in accordance with a given algorithm that considers characters as the maximum possible lines to look like this:

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

Each font-size must be adjusted so that the width is equal to the full width (fixed) in the h1 field. Some negative line-spacing will also be used. It should look like this:

I can let CSS3 and JS be used on this.

Answer 1

I posted a question by trying a couple of plugins that didn't work 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 is JFiddle to see it in action.