Question

我在将数据保留在div边界内时遇到问题。

以下是我遇到问题的演示：

<html>
<head>
    <style>
        #main {
          width: 500px;
          margin:50px auto;
        }

        #data {
          width:500px;
          height:500px;
          border: 1px solid #000000;
        }
    </style>
</head>
<body>
    <div id="main">
        <div id="data"> TestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTest
        </div>
    </div>
</body>

这里我修复了div宽度500px，但数据仍在扩展div边界。

当数据达到max宽度时，是否存在下一行显示的剩余数据？

Answer 1

如果您希望文本保留在div中并显示在下一行，则可以使用word-wrap:break-word;。

jsFiddle here.

Answer 2

您可以使用：

word-wrap: break-word;

自动换行属性指定当前渲染的行是否应该如果内容超出指定渲染的边界，则中断元素的框（这在某些方面类似于'剪辑'和意图中的'溢出'属性。）此属性仅适用于元素具有可视化呈现，是具有显式的内联元素高度/宽度，绝对定位和/或是块元素。

这是CSS3中引入的一个属性，但它应该适用于旧浏览器。

Fiddle

Answer 3

#data
        {
            width:500px;
            height:auto;
            border: 1px solid #000000;
            word-wrap:break-word;
            overflow:auto;

        }

长数据扩展了div的限制

3 个答案: