title: CSS: Line break after first word for any content
body: <p>I need to leave only one word on the first line regardless of content, so no additional markup possible.</p>
  
  <p>I've tried to do this using <code>word-spacing</code> with <code>::first-line</code> pseudo-element.
  This works fine in Firefox or IE, but fails in WebKit browsers (tested in latest versions of Chrome, Opera and Safari). </p>
  
  <p>Also, setting word-spacing for the whole element works just fine.</p>
  
  <p>Am I missing something or it just doesn't work in WebKit?</p>
  
  <p>Example below does exactly what I want if opened in Firefox or IE, but not in WebKit browsers.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="outer"&gt;
    &lt;span class="inner with-first-line"&gt;long line with words&lt;/span&gt;
  &lt;/div&gt;
  
  &lt;div class="outer"&gt;
    &lt;span class="inner whole"&gt;long line with words&lt;/span&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>