Question

I have a DIV with the following css

.divTab
{
    width: 700px;
    height: 550px;
    overflow:scroll;
    font-size: small;
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    word-wrap: break-word;
}

and the following html

  <div id="fragment-1">
        <div class="divTab">
            <pre>'.$my_name.'</pre>
            <pre>'.$my_servings.'</pre>
            <pre>'.$my_clients.'<pre>
            <pre>'.$my_description.'<pre>
        </div>
   </div>

So now my problem is that the text being brought by $my_description 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?

Thank you

Answer 1

Add this CSS:

pre {
    overflow-x: auto; /* Use horizontal scroller if needed */
    white-space: pre-wrap; /* css-3 */
    white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
    word-wrap: break-word; /* Internet Explorer 5.5+ */
    white-space : normal;
}

Here’s an example of it working: http://jsfiddle.net/cSa2C/