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 |
---------------- ----------------
Use
.one-word-per-line {
word-spacing: <parent-width>;
}
.your-classname{
width: min-intrinsic;
width: -webkit-min-content;
width: -moz-min-content;
width: min-content;
display: table-caption;
display: -ms-grid;
-ms-grid-columns: min-content;
}
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).