Jak zmusić tekst aby nie przekraczał height? Opcje

[Grzesiek1]

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

Ten post edytował Grzesiek1 26.09.2008, 13:24:57

[phpion]

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

[Grzesiek1]

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

Ten post edytował Grzesiek1 24.09.2008, 16:49:36

[kuebk]

A jakby z max-height sprobowac?

[GrayHat]

CSS: overflow

[sowiq]

@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

<div style="width: 300px; height: 200px; overflow: hidden;">
    <div style="width: 100px; float: left;"></div>
    <div style="width: 100px; float: left;"></div>
    <div style="width: 100px; float: left;"></div>
</div>

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.

Ten post edytował sowiq 26.09.2008, 13:16:27