Forum PHP.pl > Jak zmusić tekst aby nie przekraczał height?

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: Jak zmusić tekst aby nie przekraczał height?

Forum PHP.pl > Forum > Po stronie przeglądarki

Grzesiek1

24.09.2008, 16:19:12

Jak określić height dla tekstu, po przekroczeniu wymusić przejście do nowej kolumny
Próbowałem coś tak

Kod

<div style="border:1px solid black;height:47px;overflow:hidden;">
    1tekst<br/>
    2tekst<br/>
    3tekst<br/>
    4tekst<br/>
    5tekst<br/>
    6tekst<br/>
    7tekst<br/>
</div>

ale efekt to tylko ucięcie, czyli tak jak w specyfice overflow

Chodzi o to żeby efekt był taki jak przy takim kodzie

Kod

<div style="border:1px solid black;width:100%;">
    <div style="height:47px;float:left;">
        1tekst<br/>
        2tekst
    </div>
    <div style="height:47px;float:left;">
        3tekst<br/>
        4tekst
    </div>
    <div style="height:47px;float:left;">
        5tekst<br/>
        6tekst
    </div>
    <div style="height:47px;float:left;">
        7tekst
    </div>
</div>

Ten sposób mi nie pasuje, bo potrzebuje aby wszystko było w jednym DIV

phpion

24.09.2008, 16:23:20

Swego czasu miałem podobny problem (o ile dobrze Cię zrozumiałem). Przejrzyj ten temat:
http://forum.php.pl/index.php?showtopic=73483

Grzesiek1

24.09.2008, 16:47:56

No tam jest tak samo rozwiązane jak ja tutaj napisałem, czyli za pomocą float:left; do każdej kolumny, a ja chciałem żeby po określonej wysokości samo przeskakiwało np.

--------- początek div
teskt1 teskt6
teskt2 teskt7
teskt3 teskt8
teskt4 teskt9
teskt5 teskt10
--------- koniec div

bez obejmowania już tesktów 1-5 divem z float:left;
Po prostu pisze coś co jest bardzo dynamiczne i obejmowanie tej wygenerowanej treści jakimiś tagami to za dużo zabawy...

Coś podobnego do tego potrzebuje...

Kod

<div style="-moz-column-width:50px; -moz-column-gap:100px;">
    <ul>
        <li>teskt1</li>
        <li>teskt2</li>
        <li>teskt3</li>
        <li>teskt4</li>
        <li>teskt5</li>
        <li>teskt6</li>
        <li>teskt7</li>
        <li>teskt8</li>
        <li>teskt9</li>
        <li>teskt10</li>
        <li>teskt11</li>
    </ul>
</div>

Niestety to działa tylko na Firefox3 (CSS3)
http://developer.mozilla.org/pl/Kolumny_CSS3

kuebk

26.09.2008, 07:02:04

A jakby z max-height sprobowac?

GrayHat

26.09.2008, 12:10:23

CSS: overflow

sowiq

26.09.2008, 13:14:48

@GrayHat,
przeczytałeś pierwszego posta? Autor napisał, że overflow się nie nadaje. Nie do tego. Tu mają być kolumny a nie scroll.

@Autor,
Masz jedno, niezbyt skomplikowane wyjście, ale do uzuskania efektu potrzeby jest JS.

Robisz sobie coś takiego:

Kod

I teraz pakujesz treść do pierwszego div'a. Sprawdzasz, czy jego wysokość (offsetHeight - JS) jest większa niż podane 200px. Jeśli tak, to kopiujesz jego zawartość (innerHTML - JS) do drugiego diva, ale temu drugiemu nadajesz scrollTop = 200px (+/- kilka px na wysokość linii, żeby nic nie wystawało

). Czyli nie robisz nic innego, tylko wstawiasz dwa div'y obok siebie, ale jeden przesuwasz w górę i wygląda to jak dwie kolumny. Analogicznie robisz z trzecim.

Nie wiem czy jest to najlepszy sposób, ale powinien działać na każdej przeglądarce.

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.