css word wrap that wraps whole word without breaking them?

I was messing about with this. People didn't mention setting the word-break style too. The default word-break rules must wrap the word at the end of the container space, but doesn't keep the word intact.

So the solution to your problem in CSS would be:

pre{
    white-space: pre-wrap;
    word-break: keep-all; /*this stops the word breaking*/
}

Edit: I was messing with this further and because I'm using bootstrap, their styling seems to mess with pre tag a lot. Use the !important keyword to override their styling.

You don't need to do anything special. Normally the text will break between words.

If that doesn't happen, then

1. either the container is too wide
2. the container is explicitly set to not break on spaces at all. For instance if it is a <pre> element, or has the css white-space:pre; or white-space:nowrap;.
3. the text contains non-breaking spaces ( ) instead of normal spaces.

Solution: use

white-space: pre-wrap;

It will make the element behave like a pre element, except it also wraps when the line is too long. See also: http://css-tricks.com/almanac/properties/w/whitespace/