css word wrap that wraps whole word without breaking them?

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/