How to line break words in span [duplicate] - html

Question

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 1

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

Answer 2

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

Answer 3

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.

Answer 4

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

Answer 5

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 {
width: 0;
overflow: visible;
}
<div>Short Word</div>
<hr>
<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 {
width: min-intrinsic; /* old Chrome, Safari */
width: -webkit-min-content; /* less old Chrome, Safari */
width: -moz-min-content; /* current Firefox */
width: min-content; /* current Chrome, Safari; not IE or Edge */
}
<div>Short Word</div>
<hr>
<div>Gargantuan Word</div>

Answer 6

<span> is an inline element and I'm adding an display: inline-block to give a width to the element max-width: min-content;, min-content is the value/width of the smallest word in your text/sentance.
If you use min-content, the "width" will be your longest word. In this case Example is your longer word. But if you have different words like and if or few 2/3 char words then this words will fit on the same line.
If you want to keep the on word behavior you can give a fixed width, for example 5px.
Check more examples in CodePen.
.wrapWord {
display: inline-block;
max-width: min-content;
}
<div>
<span class="wrapWord">
Example Word
</span>
</div>

Answer 7

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

Answer 8

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

Answer 9

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

Answer 10

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>

Answer 11

I did this on a project where the client wanted the 3 word title on a different line. Basically your increase the spaces with CSS the use the white-space to separate the lines.
word-spacing:9999px;
white-space: pre-line;

Answer 12

In my case,
word-break: break-all;
worked perfecly, hope it helps any other newcomer like me.