title: Breaking words using CSS
body: <p><img src="https://i.stack.imgur.com/1eVh8.png" alt="screenshot"></p>
  
  <p>When the text in <code>&lt;p&gt;</code> tag is too long, it appears like this, how to prevent this with CSS? I've tried the CSS property <code>word-break: break-all;</code> but Firefox and Opera doesn't support this property, and besides that other "normal" words also breaking. So I want to break only very long words, but not short words, depending on width of white <code>&lt;div&gt;</code>.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
      background-color: #ccc;
  }
  h2 {
      float: left;
      color: #525254;
      margin: 0px;
      font: bold 15px Arial, Helvetica, sans;
  }
  .post {
      background-color: #fff;
      float: left;
      clear: both;
      padding: 20px;
      width: 500px;
      border-bottom: solid 1px #ddd;
  }
  .post_cell {
      display: table-cell;
      vertical-align: middle;
  }
  .post_body {
      display: table-cell;
      width: 400px;
      opacity: 0.8;
  }
  .profile_img {
      border: solid 3px #ccc;
      width: 48px;
      height: 48px;
      margin: 0px 15px;
  }
  .post_info {
      color: #c3c3c3;
      font: normal 12px Arial, Helvetica, sans;
      margin-left: 8px;
  }
  a.no_style {
      color: inherit;
      text-decoration: inherit;
      font: inherit;
  }
  p {
      float: left;
      clear: both;
      color: #525254;
      margin: 0px;
      padding: 0px;
      line-height: 18px;
      font: normal 15px Arial, Helvetica, sans;
      word-wrap: break-word;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="post"&gt;
      &lt;div class="post_cell"&gt;
          &lt;input type="checkbox" /&gt;
      &lt;/div&gt;
      &lt;div class="post_cell"&gt;
          &lt;img class="profile_img" src="" height="48"&gt;
      &lt;/div&gt;
      &lt;div class="post_body"&gt;
          &lt;div class="post_details"&gt;
              &lt;h2&gt;
                  &lt;a href="javascript:void(0)" target="_blank" class="no_style"&gt;user&lt;/a&gt;
              &lt;/h2&gt;
              &lt;span class="post_info"&gt;
                  &lt;span class="passed_time"&gt;15 hours ago&lt;/span&gt; | 
                  &lt;a href="javascript:void(0)" class="no_style"&gt;3 Comments&lt;/a&gt;
              &lt;/span&gt;
          &lt;/div&gt;
  &lt;p&gt;zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>You can check out this for more: <a href="http://jsfiddle.net/Le4zK/16/" rel="nofollow noreferrer">http://jsfiddle.net/Le4zK/16/</a> </p>