如何使div中的文本不溢出其宽度

Question

我有一个带有以下css的DIV

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

和以下的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>

所以现在我的问题是,文本被$my_description溢出宽度并在底部添加一个滚动,我不希望它溢出它的宽度,而是如果它达到divs宽度则进入下一行.我怎样才能做到这一点？

谢谢

Answer 1

添加此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;
}

以下是它工作的一个例子:http://jsfiddle.net/cSa2C/