title: Split too long words with '-' character
body: <p>I'm testing some html and css stuff, and i have a problem.</p>
  
  <p>I have some divs floating next to each other with <code>width:15%;</code>, and when i type long words, they overlap.
  I found a solution by using <code>word-wrap:break-word</code>.</p>
  
  <p><strong>but:</strong> i think it's kind of weird to split a word without a dash (-) character.</p>
  
  <p>so, right now, my div looks like this:</p>
  
  <pre><code>&lt;style&gt;
      .floating-div{
         margin: 1px;
         float: left;
         padding: 1%;
         word-wrap: break-word;
      }
  &lt;/style&gt;
  
  &lt;div class="floating-div"&gt;
        &lt;p&gt;Hexakosioihexekontahexaphobia&lt;/p&gt; &lt;!--Just a random long word--&gt;
  &lt;/div&gt;
  
  
  |---------------|
  |hexakosioihexe |
  |kontahexaphobia|
  |               |
  |---------------|
  </code></pre>
  
  <p>can i somehow make it automatically add a dash like this? (by using css or javascript)</p>
  
  <pre><code>|----------------|
  |hexakosioihexe- |
  |kontahexaphobia |
  |                |
  |----------------|
  </code></pre>