html - long data extending the limit of div

Question

I am having a problem keeping long data within a divs boundary.

Here is the demo for which I am facing the problem:

<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>

Here I make the div width 500px fix but still the data is extending the div boundary.

Is there any solution that when the data reaches to the max width the remaining data displayed in the next line?

score 2 · Accepted Answer

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

jsFiddle在这里。

score 1 · Accepted Answer

您可以使用：

word-wrap: break-word;

Word-wrap 属性指定如果内容超出元素的指定渲染框的边界，当前渲染的行是否应该中断（这在某些方面类似于意图中的 'clip' 和 'overflow' 属性。）该属性应该仅当元素具有可视化渲染、是具有显式高度/宽度的内联元素、绝对定位和/或块元素时才适用。

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

小提琴

score 0 · Accepted Answer

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

        }

html - long data extending the limit of div

3 回答 3

Related