javascript - 使用 getelementbyid 时未应用 Div 样式

Question

我想将一组数字放入一个 div 中。我知道数组会很长，所以我想要一个最大宽度，这样数字将继续到下一行。我有一个示例代码 here 而且，如您所见，最大宽度似乎并不适用于数字——它们只是保持在一行上。我如何获得类内的宽度以也应用于数字？

CSS:

.divstyle {
    background-color:orange;
    height:125px;
    width: 75px;
}

HTML:

<div class="divstyle">
<div id="test"></div>
</div>

Javascript:

var number = Math.floor(Math.random()*99+1);
var num = [];
for (var i = 0; i < 30; i++) {
    var number = Math.floor(Math.random()*100+1);
    num.push(number);
}
document.getElementById("test").innerHTML = num;

我敢打赌我犯了一个简单的错误，但我不熟悉 CSS，所以就是这样。

Answer 1

将此添加到您的 div 样式中:

word-wrap: break-word;

如果您希望数字不超过 div 的高度，也将其添加到您的 div 的样式中(通过滚动条保持设置的高度):

overflow: auto;

...或者添加这两个(根据内容大小调整高度):

height: auto;
min-height: 125px;

http://jsbin.com/vuvih/5/edit

文档:https://developer.mozilla.org/en-US/docs/Web/CSS/word-wrap

The word-wrap CSS property is used to specify whether or not the browser may break lines within words in order to prevent overflow (in other words, force wrapping) when an otherwise unbreakable string is too long to fit in its containing box.