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

Doc：https://developer.mozilla.org/en-US/docs/Web/CSS/word-wrap

word-wrap CSS属性用于指定浏览器是否可以在单词中断行以防止溢出（换句话说，强制换行）当一个其他牢不可破的字符串太长而无法容纳在其中时包含盒子。

Answer 2

这是因为CSS＆＃34;认为＆＃34;这只是一个字，不要破坏界限。

你应该使用

document.getElementById("test").innerHTML = num.join(', ');

这样您就可以用逗号和空格分隔数字

Answer 3

正在发生的事情是你的内容都被认为是一个单词。任何事物之间都没有空白。

您需要指定

word-wrap: break-word;

为了强行破坏单词。

以下是JSFiddle的编辑：http://jsfiddle.net/hy9Cb/2/

在这里你可以找到断字的所有不同值： http://www.w3schools.com/cssref/css3_pr_word-break.asp

Answer 4

您需要将word-wrap: break-word;添加到您的CSS中，并确保它不会溢出您可以使用的框overflow: scroll;

请在此处查看：http://codepen.io/anon/pen/lmosb

使用getelementbyid时未应用Div样式

4 个答案: