Ben Ben - 5 months ago 82
CSS Question

Can CSS force a line break after each word in an element?

I'm building a multilingual site, with the owner helping me with some translations. Some of the displayed phrases need line breaks to maintain the style of the site.

Unfortunately, the owner isn't a computer guy, so if he sees

foo<br />bar
there's the chance he'll modify the data somehow as he's translating.

Is there a CSS solution (besides changing the width) to apply to an element which would break after every word?

(I know I can do this in PHP, but I'm wondering if there's a nifty trick I don't know about in CSS to accomplish the same thing, perhaps in the CJK features.)

EDIT

I'll attempt to diagram what's happening:

---------------- ----------------
| Short Word | | Gargantuan |
| | | Word |
---------------- ----------------


The long word breaks automatically, the short word doesn't. I want it to look like this:

---------------- ----------------
| Short | | Gargantuan |
| Word | | Word |
---------------- ----------------

Answer

Use

.one-word-per-line {
    word-spacing: <parent-width>; 
} 

where <parent-width> is the width of the parent element (or an arbitrary high value that doesn't fit into one line). That way you can be sure that there is even a line-break after a single letter. Works with Chrome/FF/Opera/IE7+ (and probably even IE6 since it's supporting word-spacing as well).