CSS: Line break after first word for any content

Question

I need to leave only one word on the first line regardless of content, so no additional markup possible.

I've tried to do this using word-spacing with ::first-line pseudo-element. This works fine in Firefox or IE, but fails in WebKit browsers (tested in latest versions of Chrome, Opera and Safari).

Also, setting word-spacing for the whole element works just fine.

Am I missing something or it just doesn't work in WebKit?

Example below does exactly what I want if opened in Firefox or IE, but not in WebKit browsers.

.outer {
  width: 100px;
  border: 1px solid black;
  height: auto;
  margin: 0 0 20px;
}

.inner {
  display: inline-block;
}

.with-first-line::first-line {
  word-spacing: 200px;
}

.whole {
  word-spacing: 200px;
}

<div class="outer">
  <span class="inner with-first-line">long line with words</span>
</div>

<div class="outer">
  <span class="inner whole">long line with words</span>
</div>

Duplicate of https://stackoverflow.com/questions/55612/css-to-increase-size-of-first-word please try this. — Awsme Sandy, Aug 22 '17 at 10:38
I am not sure I am getting what you want.You want just the first word in one line and the rest of them where ?In your example there is `long` in the first line with `line`. — l.g.karolos, Aug 22 '17 at 10:44
@AwsmeSandy, yeah, I specifically said in the header "CSS". Also, the content in my case is inaccessible, so I cannot put additional markup there. — Dmitry Yantsen, Aug 22 '17 at 10:44
@l.g.karolos I want the first word to be alone on the first line and the rest to just be like normal text, starting from the second line. The provided example does what I want in IE and Firefox. — Dmitry Yantsen, Aug 22 '17 at 10:45
And you don't want to change the Html at all?If you leave the rest of the word outside the span you could accomplish what you want — l.g.karolos, Aug 22 '17 at 10:50
@l.g.karolos yes, easily, or just a simple `br` would work, but unfortunately I don't have access to the content of the span. — Dmitry Yantsen, Aug 22 '17 at 10:51
**This is not possible with CSS...[there is no :first-word selector](https://stackoverflow.com/questions/7440572/css-bold-first-word)** — Paulie_D, Aug 22 '17 at 11:49
@Paulie_D nevertheless Firefox and IE do display word-spacing properly on the first line. — Dmitry Yantsen, Aug 22 '17 at 11:50

score 0 · Answer 1 · answered Aug 22 '17 at 10:59

So , I think that will do

(function () { 
    var node = $(".with-first-line").contents().filter(function () { return this.nodeType == 3 }).first(),
        text = node.text(),
        first = text.slice(0, text.indexOf(" "));
    
    if (!node.length)
        return;
    
    node[0].nodeValue = text.slice(first.length);
    node.before('<span class="first">' + first + '</span><br/>');
})();

.first { color: red; font-weight: bold; }

.outer {
  width: 100px;
  border: 1px solid black;
  height: auto;
  margin: 0 0 20px;
}

.inner {
  display: inline-block;
}

.with-first-line::first-line {
  word-spacing: 200px;
}

.whole {
  word-spacing: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer">
  <span class="inner with-first-line">long line with words</span>
</div>

<div class="outer">
  <span class="inner whole">long line with words</span>
</div>

Yeah, this is valid and does what I want, but I was actually looking for a solution with no Javascript or an explanation as to why it cannot be done in WebKit browsers. Thank you though. — Dmitry Yantsen, Aug 22 '17 at 11:03

CSS: Line break after first word for any content

1 Answers1