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

No. That would work if there was a `:first-word` selector but there isn't http://stackoverflow.com/questions/55612/css-to-increase-size-of-first-word — Michael Coker, Mar 09 '17 at 20:19

score 2 · Accepted Answer · answered Mar 09 '17 at 20:19

2

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

answered Mar 09 '17 at 20:19

broodjetom

276
1
11

The JavaScript would be better I guess, also for readability. – broodjetom Mar 09 '17 at 20:20

score -1 · Answer 2 · edited Jan 28 '23 at 11:25

::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>
</article>

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.

Your method to add a line break after the first word with CSS is to already have a break after the first word, and then to style the top line to be bold? — Joundill, Jan 27 '23 at 01:15

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

2 Answers2