title: Why the strings sticks out from the Bubble window?
body: <p>Strings has to go to next line if it's long. How can I do this?</p>
  
  <p><a href="http://jsfiddle.net/Yu6dD/" rel="nofollow">Demo</a></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="chat"&gt;
  
  &lt;table&gt;
    &lt;tbody&gt;
       &lt;tr&gt;
                 &lt;th&gt;Body&lt;/th&gt;
       &lt;/tr&gt;
  
  
  
      &lt;tr id="comment_617"&gt;
              &lt;td&gt;&lt;div class="bubble me"&gt;&lt;span class="text-error"&gt;01-10 03:29&lt;/span&gt;：Person A&lt;br&gt;
              bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
              &lt;form action="/shop/walmart/posts/617" class="button_to" data-remote="true" method="post"&gt;&lt;div&gt;&lt;input name="_method" value="delete" type="hidden"&gt;&lt;input data-confirm="Are you sure?" data-disable-with="deleting..." value="destroy" type="submit"&gt;&lt;input name="authenticity_token" value="aoLKQnl4M2SWVlOrXGR+qIMLSeY5m1tKiC/PSnYQjmw=" type="hidden"&gt;&lt;/div&gt;&lt;/form&gt;
              &lt;/div&gt;&lt;/td&gt;
      &lt;/tr&gt;
  
  
  
  
      &lt;tr id="comment_615"&gt;
              &lt;td&gt;&lt;div class="bubble me"&gt;&lt;span class="text-error"&gt;01-10 03:25&lt;/span&gt;：Person A&lt;br&gt;
              bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
              &lt;form action="/shop/walmart/posts/615" class="button_to" data-remote="true" method="post"&gt;&lt;div&gt;&lt;input name="_method" value="delete" type="hidden"&gt;&lt;input data-confirm="Are you sure?" data-disable-with="deleting..." value="destroy" type="submit"&gt;&lt;input name="authenticity_token" value="aoLKQnl4M2SWVlOrXGR+qIMLSeY5m1tKiC/PSnYQjmw=" type="hidden"&gt;&lt;/div&gt;&lt;/form&gt;
              &lt;/div&gt;&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/tbody&gt;
  
   &lt;div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.chat {
      width: 400px;
  }
  
  .bubble{
      background-color: #F2F2F2;
      border-radius: 5px;
      box-shadow: 0 0 6px #B2B2B2;
      display: inline-block;
      padding: 10px 18px;
      position: relative;
      vertical-align: top;
  }
  
  .bubble::before {
      background-color: #F2F2F2;
      content: "\00a0";
      display: block;
      height: 16px;
      position: absolute;
      top: 11px;
      transform:             rotate( 29deg ) skew( -35deg );
          -moz-transform:    rotate( 29deg ) skew( -35deg );
          -ms-transform:     rotate( 29deg ) skew( -35deg );
          -o-transform:      rotate( 29deg ) skew( -35deg );
          -webkit-transform: rotate( 29deg ) skew( -35deg );
      width:  20px;
  }
  
  .me {
      float: left;   
      margin: 5px 45px 5px 5px;
      width: 200px;       
  }
  
  .me::before {
      box-shadow: -2px 2px 2px 0 rgba( 178, 178, 178, .4 );
      left: -9px;           
  }
  
  .you {
      float: left;    
      margin: 5px 10px 5px 5px;
      width: 200px;         
  }
  
  .you::before {
      box-shadow: 2px -2px 2px 0 rgba( 178, 178, 178, .4 );
      right: -9px;    
  }
  </code></pre>