title: breaking/ wrapping a long word using css
body: <p>I have a div which is the width of the page. I want a very long word in this div to break and wrap, so all the content is displayed on the screen and doesn't overflow/ width is never greater than 100%.</p>
  
  <p>I've tried <code>overflow-wrap: break-word;</code> but this doesn't seem to do the trick.</p>
  
  <p>Thanks.</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>.container { max-width: 100%;
  margin: 0 20px;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  float: none; }
  
  h1 { text-align: center;
  font-weight: 800;
  padding: 0px 20px;
  color: #bec0ca;
  font-size: 4.0rem;
  line-height: 1.2;
  letter-spacing: -.5rem;
  font-weight: 800;
  padding: 0px 40px;
  max-width: 100%;
  overflow-wrap: break-word;}</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
  &lt;h1&gt; this is the longestwordevergodhelpmewhycantthisjustwork longes word ever.&lt;/h1&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>