title: Prevent div contents from overflowing
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class = "board"  style = " min-height: 80px; border-radius: 3px;  background-color: #e2e4e6;  "&gt;
  
    &lt;div class = "list" style = "white-space: normal; width: 240px; min-height: 35px; border-radius: 3px; margin-left: auto; margin-right: auto; background-color: #ffffff; margin-top: 5px; " contenteditable = "true" data-placeholder = "Add a List..."&gt;&lt;/div&gt; 
  
    &lt;div  style = "width: 250px; height: 35px; margin-top: 5px;"&gt;
      &lt;input class = "save"  type="button" value="Save"  style = "cursor: pointer; width: 60px; height: 30px; background-color: gray; border-color: gray; margin-left: 10px; border-radius: 3px; vertical-align: top;" &gt;
  
      &lt;img class = "close" src = "media/icons/close.png" width="27" height="27" style = "cursor: pointer; margin-top: 3px; margin-left: 5px;"&gt;     
    &lt;/div&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>This code is works fine for me. And when I click on the save button, the contents are save to another div.</p>
  
  <pre><code>$('.save').on('click', function() {
          var listName = $('.list').text();
  </code></pre>
  
  <p>Here I am save the text.               </p>
  
  <pre><code>var listNameContent = $('&lt;div class  = "list-name-content"&gt;'+ listName +'&lt;/div&gt;');
  </code></pre>
  
  <p>But the contents are too long, it overflow to the outside of the div. I want all the texts inside of my div. I tried the <strong>white-space, word-wrap</strong> these are not works for me. Please help me.   Thank You.</p>