title: Wrap text in css3 columns
body: <p>I have a long text that I want to show in a newspaper-like manner, e.g. inside columns, to the user. This improves readability. However if a line is longer than a column's width, words are cut off, e.g. hidden behind the column to the right. I need to wrap those lines, inside the column, to make all text visible. </p>
  
  <p>Here is my code so far:</p>
  
  <pre><code>&lt;div id="editor" contenteditable&gt;
      Testdiv (insert long text here)
  &lt;/div&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>#editor{
  /* span the editor's content automatically above multiple columns: */    
      -webkit-columns: 300px 3; /* Chrome, Safari, Opera */
      -moz-columns: 300px 3; /* Firefox */
      columns: 300px 3;
  
      -webkit-column-gap: 20px;
         -moz-column-gap: 20px;
              column-gap: 20px;
  
  /* wrap text that does not fit into one column: &lt;-- Does not work as expected */ 
      word-break: break-all;
      white-space: normal;
  }
  </code></pre>
  
  <p><strong>Update</strong>
  I uploaded an image of the problem.
  Inside the image you can see the new css (only 2 columns). But it did not change. The code from the fiddle was what I found out initially before trying to adapt to my use case, because there it was working for me, too. I am rendering with chrome engine, if that matters.</p>
  
  <p><a href="https://i.stack.imgur.com/JA9pE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JA9pE.png" alt="enter image description here"></a></p>
  
  <p><strong><a href="https://jsfiddle.net/isherwood/r6z63uLb/" rel="nofollow noreferrer">Fiddle demo</a></strong></p>