title: how to make the text in a div to not overflow its width
body: <p>I have a DIV with the following css</p>
  
  <pre><code>.divTab
  {
      width: 700px;
      height: 550px;
      overflow:scroll;
      font-size: small;
      font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
      word-wrap: break-word;
  }
  </code></pre>
  
  <p>and the following html</p>
  
  <pre><code>  &lt;div id="fragment-1"&gt;
          &lt;div class="divTab"&gt;
              &lt;pre&gt;'.$my_name.'&lt;/pre&gt;
              &lt;pre&gt;'.$my_servings.'&lt;/pre&gt;
              &lt;pre&gt;'.$my_clients.'&lt;pre&gt;
              &lt;pre&gt;'.$my_description.'&lt;pre&gt;
          &lt;/div&gt;
     &lt;/div&gt;
  </code></pre>
  
  <p>So now my problem is that the text being brought by <code>$my_description</code> overflows the width and adds a scroll at the bottom, i do not want it to overflow its width but instead break into the next line if it reaches the divs width. How can I do that?</p>
  
  <p>Thank you </p>