[HTML, CSS] Ořezání obsahu buňky

Webdesign, HTML, CSS, Flash, PHP, ASP, .NET, JavaScript. Kritika www stránek na Smetišti.

Moderátor: Moderátoři Živě.cz

Odeslat příspěvekod JN 2. 11. 2007 15:48

Lze mít nastaven sloupec v tabulce tak , aby se dlouhý text nezalamoval (nowrap) ale aby zroveň dlouhý text nezvětšoval šířku (danou procentuálně nebo absolutně ) sloupce . Tj. aby v buňce byla jen část textu a jeho zbytek nebyl vidět (zajel pod pravý okraj buňky) ?
Naposledy upravil JN dne 5. 11. 2007 07:51, celkově upraveno 1
JN
Junior

Odeslat příspěvekod suk 2. 11. 2007 16:36

overflow: hidden myslim
suk
Mírně pokročilý
Uživatelský avatar

Odeslat příspěvekod JN 5. 11. 2007 07:55

To nefunguje, ale našel jsem fintu - obsah buňky se zabalí do divu.
Sice se skrývá celé slovo (hodila by se spíš jen jeho část, která hodlá vylézt z buňky), ale alespoň něco.

Kód: Vybrat vše
<table border="1">
<tr>
<th>x</th>
<th>y</th>
</tr>
<tr>
<td width="10%">
<div style="width:inherit;height:20px;overflow:hidden;">
aa aa aa aa aaaaaaaaaaaaaaaaaaaa
</div>
</td>
<td>bb</td>
</tr>
</table>
JN
Junior

Odeslat příspěvekod Chupacabras 5. 11. 2007 08:21

Pokiaľ ešte nechceš aby sa ti to zalamovalo, tak tam pridaj
white-space: nowrap;
Chupacabras
Pokročilý
Uživatelský avatar

Odeslat příspěvekod JN 5. 11. 2007 08:26

To ale neudělá nic jiného, než roztáhne buňku tak, aby se do ní vešel celý její obsah...
JN
Junior

Odeslat příspěvekod Chupacabras 5. 11. 2007 08:32

A prečo si tam dával to DIVko??
Veď to nastav rovno do TD bez DIVka.

resp. DIV nechaj, ale daj overflow:hidden; do TD
Chupacabras
Pokročilý
Uživatelský avatar

Odeslat příspěvekod JN 5. 11. 2007 08:37

Když tam nedám div, v buňce bude vždy VŠECHNO (přizpůsobí se její šířka), ať už s nowrap nebo bez. Div způsobuje, že se šířka buňky nemění, ale redukuje se její obsah.
JN
Junior

Odeslat příspěvekod Chupacabras 5. 11. 2007 08:49

Napísal som, aby si DIV nechal a aby si dal overflow:hidden; do TD...
white-space: nowrap; v DIVku tak isto ponechaj
Chupacabras
Pokročilý
Uživatelský avatar

Odeslat příspěvekod JN 5. 11. 2007 09:28

Už se v tom ztrácím, tak to zjednodušším. Výše uvedený kód obrazí namísto "aa aa aa aa aaaaaaaaaaaaaaaaaaaa" hodnotu
"aa aa aa aa" , tedy tolik, koli povolí šířka buňky (ta se nepřizpůsobuje - tak jsem to chtěl). Ideální by bylo něco jako "aa aa aa aa aaaaaaa", ale to tuším není šance.
JN
Junior

Odeslat příspěvekod Chupacabras 5. 11. 2007 09:51

Ježiš, ty si Maďar...
Pripadá mi to, ako keby som písal po klingonsky...
Tak ešte raz:
do TD pridaj overflow:hidden;
do DIV pridaj white-space: nowrap;
(vychádzam z kódu, ktorý si sem vložil)
Chupacabras
Pokročilý
Uživatelský avatar

Odeslat příspěvekod JN 5. 11. 2007 10:02

Výsledek
"aa aa aa aa aaaaaaaaaaaaaaaaaaaa"
a roztažená buňka.

PS.: Lepší dát hotový kód. Až si tohle vlákno bude prohlížet někdo další, určitě si pro sebe nebude něco modifikovat.
JN
Junior

Odeslat příspěvekod Chupacabras 5. 11. 2007 11:14

Kód: Vybrat vše
<table border="1">
<tr>
<th>x</th>
<th>y</th>
</tr>
<tr>
<td width="10%" style="overflow: hidden;">
<div style="white-space: nowrap; overflow: hidden;">
aa aa aa aa aaaaaaaaaaaaaaaaaaaa
</div>
</td>
<td>bb</td>
</tr>
</table>


Len ako som si všimol, funguje to iba v štandardných browseroch (ako je Opera a Firefox). MSIE na to serie.
Chupacabras
Pokročilý
Uživatelský avatar

Odeslat příspěvekod Chupacabras 5. 11. 2007 11:19

V MSIE to chodí iba keď do DIV dáš pevnú šírku, napr. width: 150px;
Chupacabras
Pokročilý
Uživatelský avatar

Odeslat příspěvekod Arnye 7. 11. 2007 12:50

Zrovna jsem řešil ten samý problém a vyřešil jsem to taky DIVama 8)
Arnye
Junior
Uživatelský avatar


Kdo je online

Uživatelé procházející toto fórum: Žádní registrovaní uživatelé a 0 návštevníků