Can CSS Force a Line Break After Each Word in an Element

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

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

How can we break two words into separate line?

Set the maximum width to be 3 characters wide

.text {
  max-width: 3ch;
}

https://codepen.io/anon/pen/jJjpKV

Force a line break after space in words in element

You Can Use HTML <br> Tag to break like
C2 <br> Sunday

without Inverted Commas

How to line-break from css, without using br / ?

Impossible with the same HTML structure, you must have something to distinguish between Hello and How are you.

I suggest using spans that you will then display as blocks (just like a <div> actually).

p span {  display: block;}

<p><span>hello</span><span>How are you</span></p>

Break line on white space between words

You could use a very high value for the word-spacing property. It will break lines on each white space between words :

.test{  text-align:center;}h1{  word-spacing:9999px;}

<div class="test"><h1>split this</h1></div>

How to apply line break after space using CSS?

Here is one min-content will break word after space

<div id="content" style="width: min-content;">Can CSS Force a Line Break After Each Word in an Element </div>

How to force a line break in a long word in a DIV?

~~Use word-wrap:break-word;~~

~~It even works in IE6, which is a pleasant surprise.~~

word-wrap: break-word has been replaced with overflow-wrap: break-word; which works in every modern browser. IE, being a dead browser, will forever rely on the deprecated and non-standard word-wrap instead.

Existing uses of word-wrap today still work as it is an alias for overflow-wrap per the specification.

p block with line break after each word and width limited to longest word

Use width:min-content

p {
  width: min-content;
  background-color: blue;
  color: white;
  padding: 8px 16px;
  border-radius: 4px;
}

<p>extra super tag</p>
<p>extra tagverylong tag</p>

Can CSS Force a Line Break After Each Word in an Element