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         |
----------------          ----------------

11 Answers
11

Leave a Comment