[css] 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         |
----------------          ----------------

Try using white-space: pre-line;. It creates a line-break wherever a line-break appears in the code, but ignores the extra whitespace (tabs and spaces etc.).

First, write your words on separate lines in your code:

<div>Short
Word</div>

Then apply the style to the element containing the words.

div { white-space: pre-line; }

Be careful though, every line break in the code inside the element will create a line break. So writing the following will result in an extra line break before the first word and after the last word:

<div>
    Short
    Word
</div>

There's a great article on CSS Tricks explaining the other white-space attributes.

An alternative solution is described on Separate sentence to one word per line, by applying display:table-caption; to the element

In my case,

    word-break: break-all;

worked perfecly, hope it helps any other newcomer like me.

I faced the same problem, and none of the options here helped me. Some mail services do not support specified styles. Here is my version, which solved the problem and works everywhere I checked:

<table>
    <tr>
        <td width="1">Gargantuan Word</td>
    </tr>
</table>

OR using CSS:

<table>
    <tr>
        <td style="width:1px">Gargantuan Word</td>
    </tr>
</table>

If you want to be able to choose from different solutions, in addition to the given answers...

An alternative method is to give the container a width of 0 and to make sure overflow is visible. Then each word will overflow out of it and will be on its own line.

div {_x000D_
  width: 0;_x000D_
  overflow: visible;_x000D_
}

<div>Short Word</div>_x000D_
<hr>_x000D_
<div>Gargantuan Word</div>

Or you can use one of those newly proposed width values, provided those still exist by the time you read this.

div {_x000D_
  width: min-intrinsic;       /* old Chrome, Safari */_x000D_
  width: -webkit-min-content; /* less old Chrome, Safari */_x000D_
  width: -moz-min-content;    /* current Firefox */_x000D_
  width: min-content;         /* current Chrome, Safari; not IE or Edge */_x000D_
}

<div>Short Word</div>_x000D_
<hr>_x000D_
<div>Gargantuan Word</div>

https://jsfiddle.net/bm3Lfcod/1/

For those seeking for a solution that works within a flexible parent container with a children that is flexible in both dimensions. eg. navbar buttons.

//the parent (example of what it may be)
div {
  display:flex;
  width: 100%;
}

//The children
a {
  display: inline-block;
}

//text wrapper
span {
  display: table-caption;
}

The answer given by @HursVanBloob works only with fixed width parent container, but fails in case of fluid-width containers.

I tried a lot of properties, but nothing worked as expected. Finally I came to a conclusion that giving word-spacing a very huge value works perfectly fine.

p { word-spacing: 9999999px; }

or, for the modern browsers you can use the CSS vw unit (visual width in % of the screen size).

p { word-spacing: 100vw; }

The best solution is the word-spacing property.

Add the <p> in a container with a specific size (example 300px) and after you have to add that size as the value in the word-spacing.

HTML

<div>
 <p>Sentence Here</p>
</div>

CSS

div {
 width: 300px;
}

p {
 width: auto;
 text-align: center;
 word-spacing: 300px;
}

In this way, your sentence will be always broken and set in a column, but the with of the paragraph will be dynamic.

Here an example Codepen

You can't target each word in CSS. However, with a bit of jQuery you probably could.

With jQuery you can wrap each word in a <span> and then CSS set span to display:block which would put it on its own line.

In theory of course :P