[css]Woorden vallen buiten div door overflow van parent

[mithras]

In mijn cms zit een tagcloud, maar daar gaat het soms niet helemaal goed met de woorden op een nieuwe regel zetten. Hier is te zien hoe de tagcloud eruit ziet.
Het kan dus voorkomen dat een tag "te lang" is, en niet op een nieuwe regel komt te staan, maar uit het element loopt (en niet meer te zien is). Als je het probleem niet ziet, is een aantal keer refreshen voldoende (tags worden elke keer geshuffled).

Dit is het stukje html:

HTML:

<div id="tag-content">
  <a href="#" class="tagcloud" style="font-size:small;">Bla1</a>
  <a href="#" class="tagcloud" style="font-size:xx-large;">Bla2</a>
  <a href="#" class="tagcloud" style="font-size:xx-small;">Bla3</a>
  <a href="#" class="tagcloud" style="font-size:medium;">Bla4</a>
  <a href="#" class="tagcloud" style="font-size:large;">Bla5</a>
</div>

Cascading Stylesheet:

.tagcloud{
    margin: 5px;
}

Wat ik heb geprobeerd is alle <a> tags binnen "tag-content" een display:block te geven. Ook werkt een padding-left op "tag-content" niet.
Ik denk dat het aan mijn "content" blokelement ligt. "tag-content" is hiervan een child. Om floats goed te behandelen heeft mn content div een overflow:hidden meegekregen. Ik denk dus dat hierdoor dit probleem ontstaat.
Gek genoeg is de default waarde van overflow 'visible', wat de tags zou moeten weergeven, itt inherit.

In CSS3 specificaties staat wat over (word)wrapping. Aangezien dat dit nog in ontwikkeling is, denk ik niet dat "kwaliteits" browsers dit al ondersteunen, laat staan IE
Hoe kan ik dit cross-browser netjes (lees: zonder browser-specific hacks) oplossen?

[moozzuzz]

Is het ondertussen opgelost (kan het prob in IE6 XP niet te zien krijgen).

[mithras]

moozzuzz schreef op donderdag 07 december 2006 @ 18:20:
Is het ondertussen opgelost (kan het prob in IE6 XP niet te zien krijgen).

Nee, hier (Firefox 2.0 rv 1.8.1 @ Ubuntu) nog niet. Hier een screenshot van het "probleem":

Mind de halve "s" en de gehele "e" die zijn weggevallen.

[Borizz]

Volgens mij wordt het probleem veroorzaakt doordat een regel enkel afgebroken wordt als er een spatie in voorkomt. Aangezien je geen spatie (of bijv een enter) tussen je A elementen hebt. Wordt de tekst alleen maar afgebroken als er toevallig een woord in je tagcloud zit waarin een spatie voorkomt.

Ik hoop dat he teen beetje duidelijk is.
Dus i.p.v.

HTML:

<a href="blog/archive/studie" class="tagcloud" style="font-size: small;">Studie</a><a href="blog/archive/fotografie" class="tagcloud" style="font-size: small;">Fotografie</a><a href="blog/archive/Gewoon%20geblaat" class="tagcloud" style="font-size: xx-small;">Gewoon geblaat</a><a href="blog/archive/computers" class="tagcloud" style="font-size: medium;">Computers</a><a href="blog/archive/studentenleven" class="tagcloud" style="font-size: medium;">Studentenleven</a><a href="blog/archive/alledaagse%20dingen" class="tagcloud" style="font-size: xx-large;">Alledaagse dingen</a>

Zou je dit ervan kunnen maken:

HTML:

<a href="blog/archive/studie" class="tagcloud" style="font-size: small;">Studie</a> 
<a href="blog/archive/fotografie" class="tagcloud" style="font-size: small;">Fotografie</a>
<a href="blog/archive/Gewoon%20geblaat" class="tagcloud" style="font-size: xx-small;">Gewoon geblaat</a>
<a href="blog/archive/computers" class="tagcloud" style="font-size: medium;">Computers</a>
<a href="blog/archive/studentenleven" class="tagcloud" style="font-size: medium;">Studentenleven</a>
<a href="blog/archive/alledaagse%20dingen" class="tagcloud" style="font-size: xx-large;">Alledaagse dingen</a>

[mithras]

Borizz schreef op donderdag 07 december 2006 @ 18:49:
Volgens mij wordt het probleem veroorzaakt doordat een regel enkel afgebroken wordt als er een spatie in voorkomt. Aangezien je geen spatie (of bijv een enter) tussen je A elementen hebt. Wordt de tekst alleen maar afgebroken als er toevallig een woord in je tagcloud zit waarin een spatie voorkomt.

Haha, dat was het Je hebt helemaal gelijk. Gelukkig kon ik dit nog makkelijk fixen omdat het allemaal php spul is, maar het was dus helemaal geen css fout