Text Content Overflows, but I need it to go onto new line

[elwell]

Does anyone know a way to cause an uninterrupted string of text to be continue on a new line rather than flow out of the boundaries of a container?

Here is the site I'm working on:
http://lampforhaiti.org/newsite/dev.html

Look at the right column, at the first line of text under the "Recent News" header.

Thank you.

[cfajohnson]

Don't restrict the width of the container, then it will expand as necessary.

If you just want to hide the overflow:


div#whatever { overflow: hidden; }


Or, to provide a scrollbar:


div#whatever { overflow: auto; }


Or add soft hyphens (&173;) at strategic places.

[webdeveloper074]

You can achieve what you want using

word-wrap: break-word;

It has been included in CSS3.

This property specifies whether the current rendered line should break if the content exceeds the boundary of the specified rendering box for an element (this is similar in some ways to the ‘clip’ and ‘overflow’ properties in intent.) This property should only apply if the element has a visual rendering, is an inline element with explicit height/width, is absolutely positioned and/or is a block element.

Value - Description
* normal - Content will exceed the boundaries of the specified rendering box.
* break-word - Content will wrap to the next line when necessary, and a word-break will also occur if needed.

[slaughters]

He can't use word-wrap. His first line is one long word with no spaces, "dghdghdjghjdgjhkdgjkhldhljdghjkldjghkljhjk"

I don't think this is possible with just CSS - but really, how many words are there in Hatian that are 38 letters long and contain no hyphens ?

That's how many letters you would need before overflowing the border. One space or one hyphen and it automatically word wraps anyway.