title: word-wrap for contenteditable div placeholder
body: <p>I have a placeholder string in a contenteditable div. The string is not displaying in a decent way. The words are broken at the end of a line.
  Kindly please help. I need the words to be broken only when it's longer than the line, otherwise, the word should start from next line. I've add word-warp as break-word in the box, but seems not working.</p>
  
  <p>html:</p>
  
  <pre><code>&lt;div contenteditable="true" id="box"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>#box:empty:not(:focus):before{
    content:"hello thank you thank you very much hello thank you thank you very much how are you";
    font-style:italic;
    color:red;
  }
  #box{
    white-space: pre;
    border:1px solid lightgrey;
    height: 250px; 
    width: 350px;
    word-wrap:break-word;
    overflow: auto;
  }
  </code></pre>
  
  <p><a href="https://jsfiddle.net/Payson/wwgud8vh/" rel="nofollow">jsfiddle</a></p>