Controlling long <li> contents

[rockyroad]

Hi

I am having a problem whereby long <li> contents are pushing out over other elements.

Consider a list with many many characters:

<li> dss;dsa;dsa;dsa';dsa;dsa;dsa';dsa';dsa';d'sa;dsa;d'sa;d's;ad';sad;sad;sa;ds';dsa';dsa';dsa';dsa';ds'a;dsa';dsa';ds'a;ds'a;dsa';d'sa;ds'a;dsa';dsa';dsa';dsa';ds; ajasaKJSAjslkJAKASLKAL;SKAl;ksa;LKSA;lks;lAKS;Laks;laKS;LAks;laKS;ALks;laKS;LAks;lAKS;Alk;slaKS;LAks;LAKS;laks
</li>

Even now in this browser on this page, my very long <li> contents are pushing the browser and forcing a scroll... but that's not what I am after, I need to contatin the <li> contents in their - containers.

This list element is pushing out beyond the width of my divs set up for presentation...the <ul><li> reside in these divs.

I have tried wrapping the whole <ul> in a DIV with a set width, but this does not help...

Is anyone aware of how to force <li> contents to wrap around rather than push out it's containers?

Thanks,

RR

 

[cLFlaVA]

Set a width of your UL using CSS.

ul { width: 300px; }

*cLFlaVA
----------------------------
[tt]insert funny quotation here.[/tt]

 

[philote]

And if the contents of your <li>'s are like your example and have no whitespace, the browser will not be able to wrap the text to the next line.

 

[Vragabond]

Your only option then (if what philote says is true) is to put overflow: hidden; or overflow: auto; on the container and thus force the long line to be cropped (hidden) or create its own scrollbar (auto) and leave the rest of the page alone. Of course, if that is your problem, question is, why do you need such a long line without any whitespace?

 

[rockyroad]

Aha! Well that's my problem, in my haste to enter dummy text to test this out, I entered a string with no white space. Duh :-0. Thanks for the tips.; I am going test out assigning a width attribute to <UL> anyway, just to see

Thanks everyone.

RR

 

[dkdude]

Like philote says, without whitespace the browser will not know where to wrap the contents.

However, there is a HTML entity fixing this - kind of ... is't called a soft hyphen. So it will display a hyphen when the text wraps.

Try it out if you like : [tt]&shy;[/tt]

Regards


Jakob