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引入的文本溢出宽度并在底部添加一个滚动，我不希望它溢出它的宽度但是如果它到达了它则突然进入下一行div宽度。我怎么能这样做？

谢谢

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/

Answer 2

从代码中删除overflow:scroll;。

Answer 3

<pre>标签背后的想法是它是“预先格式化的文本”，以固定的宽度显示，并且只保存您手动放入的布局。因此，它希望您自己进行布局（例如，添加<br />。如上所述，您可以更改<pre>的功能，或者考虑不使用它们，而是使用，例如，常规<div>。

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

3 个答案: