title: Why word-break doesn't work here?
body: <p><a href="http://codepen.io/rick-li/pen/oshCb" rel="nofollow">http://codepen.io/rick-li/pen/oshCb</a></p>
  
  <pre><code>&lt;div class="wrapper"&gt;
    &lt;div class="left"&gt;&lt;/div&gt;
    &lt;span&gt;lfjaslkjasldjfaljdfaldflasjflasjdfldasfsdafafasdfsdafadsfazxcvzvzxv&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <pre>
  .wrapper{
    width: 400px;
    height: 300px;
    border: solid 1px;
  }
  
  .wrapper .left{
    float: left;
    width: 200px;
    height: 200px;
    border: solid 1px;
    background-color: #111111
  }
  
  .wrapper span{
    word-wrap: break-word;
  }
  
  </pre>
  
  <p>you will notice the text dropped to the bottom,</p>
  
  <p>if there're spaces exist in the text, it will wrap correct and lies on the wright, so I wonder why the word-wrap: break-word or word-wrap: break-all doesn't work?</p>