Nietypowe wyrównanie tekstu

[papieros]

Mam oto takie zadanie. Wyrównać dowolny tekst, tak aby zajmował całą wysokość elementu (np div'a). Wyrównanie miałoby dobierać odpowiednio odstęp między kolejnymi liniami tekstu, tak aby test 'rozciągnięty' był od góry do dołu div'a/ wysokość div'a jest z góry ustalona. Przykład:

---------------------------------------------

Tekst składający się z czterech linii

wyświetlany byłby jakoś tak. Pierwsza

linia od samej góry. Dwie kolejne w

środku. Czwarta na dole div'a

---------------------------------------------

A jeśli by było 5 linii, linie rozmieszczone by były w pionie gęściej (z mniejszą przerwą między nimi, np. mniejszy line-height)

---------------------------------------------

Tekst składający się z pięciu linii

wyświetlany byłby jakoś tak. Pierwsza

linia od samej góry. Trzy kolejne w

środku. Ostatnia, piąta linia wyświetlana

by była na samym końcu

---------------------------------------------

Mam nadzieję, że jasno to opisałem. Ma ktoś jakiś sprytny pomysł jak to w css rozwiązać. Element nie musi być div'em może to być np. cela tabeli albo co innego, jeśli to pomoże.

[wostrek2]

w czystym CSS chyba tego nie zrobisz.

Można spróbować tak:

https://jsbin.com/oloxip

przy czym jeżeli różnica między wysokością kontenera a paragrafem, który zawiera będzie duża to odbije się to na szybkości wczytywania strony.

[papieros]

Dzięki, to co podałeś działa elegancko ... przynajmniej na pierwszy rzut oka, tym bardziej dzięki, że nie miałem pojęcia jak to ugryźć

[papieros]

Właśnie mnie olśniło, że można ww problem rozwiązać bez jquery i javascriptów, mianowicie:

<style>
 td {vertical-align:bottom}
 </style>

 <table style="height:400px;border:1px solid black">
 <tr><td>1 linia</td></tr>
 <tr><td>2 linia</td></tr>
 <tr><td>3 linia</td></tr>
 <tr><td>4 linia</td></tr>
 </table>

Wymaga to umieszczenia tekstu w tabeli ale akurat w moim przypadku to nie przeszkadza