Is there a way to prevent a string of letters with no spaces from overflowing out of its corresponding boundaries?

Question

The question is pretty straight forward, I have tried using a span with rules set to clear:both; and display:block;, at the bottom of each list entry where the text is being inserted in with no luck. I am not really sure what to do on this. I don't expect to many entries with long consecutive letter strings but for example if someone does lolololololol or ahaahahahhhhhhhhhhhhaaaaaaaa for like 100 letters, it will overflow. If anyone can give me a pointer I would really appreciate it.

Answer 1

You can set the overflow-x attribute to hidden but it is going to simply cut off whatever is exceeding the area... here is an example

http://jsfiddle.net/TFQNL/

Otherwise I think you need to programmatically break it up

Answer 2

What behavior are you looking for, expand the parent element or break the word? AFAIK, the latter isn't possible solely using CSS, and the former depends on the styling of the ancestors. See: stackoverflow.com/questions/320184/…, stackoverflow.com/questions/363425/…, stackoverflow.com/questions/322929/… and many others (google.com/…) – outis

Answer 3

With CSS 3 there comes a CSS-way to solve this:

word-wrap: break-word;

This property originates from Microsoft and made its way into the spec for CSS3. It does its job nicely on Firefox 3.6, Safari 4, Chrome 5.

See: http://www.css3.info/preview/word-wrap/
Demo: http://hacks.mozilla.org/2009/06/word-wrap/