CSS: разрыв строки после первого слова для любого контента

Question

Мне нужно оставить только одно слово в первой строке независимо от содержания, поэтому дополнительная разметка невозможна.

Я пытался сделать это с помощью word-spacing с ::first-line Псевдо-элемент. Это отлично работает в Firefox или IE, но не работает в браузерах WebKit (протестировано в последних версиях Chrome, Opera и Safari).

Кроме того, установка межстрочного интервала для всего элемента работает просто отлично.

Я что-то упустил или просто не работает в WebKit?

Пример ниже делает именно то, что я хочу, если он открыт в Firefox или IE, но не в браузерах WebKit.

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

Answer 1

Итак, я думаю, что будет делать

(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>