Is there a way to cause a line break after the first word in a div without Javascript?

Question

I have a jquery method to do this but is there a way in CSS to accomplish this?

Here is the jQuery Code that adds the functionality:

 $('div.materialID').each(function () {
         var html = $(this).html();
         var word = html.substr(0, html.indexOf(" "));
         var rest = html.substr(html.indexOf(" "));
         $(this).html(rest).prepend($("<div/>").html(word).addClass("break"));
     });

Answer 1

CSS can not count words for you. You can try to do the following:

<div><span class="break">First</span> word</div>

and then add the following CSS

.break{
    display: block;
}

Answer 2

::first-line is a pseudo element MDN W3Schools

p::first-line { font-style: italic; }

.intro { font-weight: bold; }

<article class="intro">

<p class="intro">First-word<br>second-word</p>

<p>First-word<br>second-word</p>

First-line [first word, first line styled bold]

second-line [second word, second line normal style]

::first-line contains the first formatted line of an element, can only be attached to block level elements, and uses a limited set of properties. Further, though the behavior is undocumented, low specificity means lots of attached elements tend to break style.

This layout works well for multi-line comments under color-cubes, pictures of bird species, employee ID, and so on. You can setup rows of smaller specimens inside rows of fixed width/height divs floated left.

I am compiling color cubes in rows of ten. The row container div helps reduce unwanted wrap in the fluid sized cubes. But rules out wrapping cubes, forcing very small text under each cube, in some situations. You might face similar problems with unconstrained data under the first line. Styling "intro" in my sample might permit more flow control than just the::first-line style block.