使用getelementbyid时不应用Div样式

Div style not being applied when using getelementbyid

本文关键字：Div 样式 应用 getelementbyid 使用      更新时间：2023-09-26

我想将数字数组推入div。我知道数组将很长，所以我想要一个最大宽度，以便数字将继续到下一行。我这里有一个示例代码而且，正如您所看到的，最大宽度似乎并不适用于数字——它们只是在一行上运行。我如何得到类内的宽度，以适用于数字为好?

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，所以有。

将此添加到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

word-wrap CSS属性用于指定浏览器是否可以在单词内换行，以防止溢出(换句话说，强制换行)，当一个不可打破的字符串太长而无法容纳它的包含框时。

这是因为CSS "认为"那只是一个单词，而不换行。

你应该使用

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

用逗号和空格分隔数字

你的内容都被认为是一个词。空格

你需要指定

word-wrap: break-word;

，以强制拆字。

这是你的JSFiddle的编辑:http://jsfiddle.net/hy9Cb/2/

这里你可以找到所有不同的换行符值:http://www.w3schools.com/cssref/css3_pr_word-break.asp

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

点击这里查看:http://codepen.io/anon/pen/lmosb

相关文章：