Simple CSS question - text-wrap

Hi All,

I’m self-admittedly horrible at CSS. I have a quick question regarding text wrap.

I’m designing a mock up page here: http://anchoring.com/css-prob.html

On the left hand column, where it says “Everything else boatingggg”, I want the boatingggg to be forced to a new line rather than overlapping. How do I do this? I believe it involves addin white-space:pre-line; somewhere, but I’m really not sure where.

Feel free to criticize the semantics of the rest of the CSS as well :slight_smile:

Thanks in advance.

The text appears to be part of an image. You can’t break an image to another line. You have to have the text as text, it would also reduce the file size of your web-page.

Hi,

You have explicitly told the browser not to wrap with white-space:nowrap in your left-categories div.

However removing it will not allow a string of unbroken text to wrap but will allow normal words with gaps to wrap.

You will need to use word-wrap:break-word to break the unbroken text:

e.g.


#categories-left{
white-space:normal;
word-wrap:break-word;
}

Awesome. Worked like a charm. Thanks Paul.