Question

使用DIV标签和表单输入字段时遇到问题。我使用javascript获取输入字段的值。 Javascript工作正常。它获取输入字段值并显示在DIV标记中。问题是，当我给出长输入或长句时，它会显示在div标签中。我希望它不是以长单行显示，而是以段落的形式显示。这是我的代码。

<script>
function myFunc(){
    var str = document.myform.aaa.value;
    document.getElementById('mydiv').innerHTML=str;
}
</script>



<form>
<input type="text" name="aaa" />
<input type="button" value="Post" onclick="myFunc();" >
</form>

<div id="mydiv" width="500px" height="300px">Old text</div>

如果我给它一个输入，例如：

hello there, how are you hello there, how are youhello there, how are youhello there.

它以单行显示而不是段落格式。我希望它以这种形式显示上面的句子：

hello there, how are you hello there, 
how are youhello there, how are youhello 
there.

我有点自己解决了。我的意思是说，如果我用空格写一个句子，它工作正常，但如果有一长串字母没有任何空格，那么它不起作用。我想要的是，要么我可以用空格打字而没有空间，它应该双向工作。

Answer 1

尝试使用css设置width的{{1}}和height而不是属性。

jsFiddle

<div>

更好的是创造一种风格：

<div id="mydiv" style="width: 200px; height: 200px;">Old text</div>

使用自动换行修复没有空格的问题。

.comments {
    width: 200px;
    height: 200px;
}

<div id="mydiv" class="comments">Old text</div>

Answer 2

这与javascript没有任何关系。默认情况下，DIV标记将扩展到其父元素的100％。

如果将div的宽度设置为特定的百分比或像素宽度，则该div的内容将相应地换行。

您可以使用CSS来定义宽度，但您必须知道要设置它的宽度。

#mydiv {
    width:50%; //I just guessed at this number
}

或

#mydiv {
    width:100px; 
}

或者，您可以使用javascript来设置它。（虽然最好用CSS设置它）

document.getElementById('mydiv').style = "width:50%';

div标签和输入标签的换行调整

2 个答案: