Wielointerfejsowy tekst HTML o tej samej szerokości linii?

Question

Projektant wykonał bardzo ładny projekt, który jest dość trudny do zastosowania. Ma być stosowany do tytułów postów Wordpress, więc powinien działać z dowolnym tekstem.

Więc zanim wyłączyłem jej pomysł, sprawdzę SO :).

Tytuły powinny być wieloliniowe, jedno lub więcej słów w linii. Linie zostaną podzielone za pomocą PHP według danego algorytmu, który zlicza znaki w możliwie równa, linie, aby wyglądać tak:

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

należy dostosować Każda linia na font-size więc szerokość równa pełnej szerokości (stałe) z pudełko h1. Ponadto zostanie użyty jakiś negujący line-spacing. Powinno to wyglądać tak:

mogę sobie pozwolić, aby korzystać z CSS3 i JS w tej sprawie.

Answer 1

Opublikowałem pytanie po wypróbowaniu kilku wtyczek, które nie działały bardzo dobrze. Ale wtedy spróbowałem 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(); 

Oto JFiddle, aby zobaczyć go w akcji.