1

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.

stefanglase
  • 10,296
  • 4
  • 32
  • 42
Scarface
  • 3,845
  • 7
  • 41
  • 71
  • 3
    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: http://stackoverflow.com/questions/320184/who-has-solved-the-long-word-breaks-my-div-problem-hint-not-stackoverflow, http://stackoverflow.com/questions/363425/how-to-wrap-long-lines-without-spaces-in-html, http://stackoverflow.com/questions/322929/word-wrap-in-css-js and many others (http://www.google.com/search?q=site:stackoverflow.com+break+long+words) – outis Mar 26 '10 at 04:08
  • I have the same problem with strings without spaces – Enrique Mar 26 '10 at 04:24
  • appreciate it outis. I am implementing the php wordwrap function, it works fine with htmlentities if you execute it afterword. – Scarface Mar 26 '10 at 15:23
  • What about if you use a zero-width space character? (I am fairly certain this eixsts in unicode, but do not know what it is -- as it comes from a faint possible incorrect recollection -- or how this interacts, if at all, on different browers.) –  Mar 26 '10 at 21:31
  • You still haven't told us what behavior you expect. Investigate the `overflow` property. – tloflin Mar 31 '10 at 17:47

3 Answers3

4

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/

stefanglase
  • 10,296
  • 4
  • 32
  • 42
  • You can see that stackoverflow itself uses this solution, too: http://stackoverflow.com/questions/320184/who-has-solved-the-long-word-breaks-my-div-problem-hint-not-stackoverflow/320467#320467 – stefanglase Mar 31 '10 at 17:49
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

Chris Wagner
  • 20,773
  • 8
  • 74
  • 95
-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

Scarface
  • 3,845
  • 7
  • 41
  • 71