div標記和輸入標記的換行調整

我在使用DIV標記和表單輸入字段時遇到了一些問題。我使用javascript獲得輸入字段的值。 Javascript工作正常。它獲取輸入字段值並顯示在DIV標籤中。問題是，當我輸入一個長輸入或長句時，它顯示在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.

我有點自己梳理一下。我的意思是說，如果我用空格寫一個句子，它可以正常工作，但如果有一長串沒有空格的字母，那麼它就不起作用。我想要的是，無論我是否可以鍵入空格而沒有空格，都應該雙向工作。

來源

2013-01-23 Rebbeca

所以給div設置一個寬度。 – j08691

@ j08691 ...我將它的寬度設置爲500px，高度爲300px。仍然不工作 – Rebbeca

也許你的寬度太寬。在這裏工作很好http://jsfiddle.net/j08691/yAwrH/1/ – j08691

嘗試使用css來設置<div>而不是屬性的width和height。

jsFiddle

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

更重要的是創造一種風格：

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

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

使用自動換行來解決該問題不存在的空間。

word-wrap:break-word

來源

2013-01-23 20:27:02 Gabe

@加貝......它不工作的兄弟。這似乎很容易，但沒有任何工作。 – Rebbeca

小提琴在我試過的每個瀏覽器中都能正常工作 – Gabe

您是對的。但我建議你寫一個小代碼，並在任何瀏覽器中使用它，而不是使用小提琴。應該抓取輸入字段值，並且容器div不應該被溢出。你會看到自己，它不會工作 – Rebbeca

這和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%';

來源

2013-01-23 20:27:52 squeezebox

@squeezebox ...我已經嘗試了所有上述方法，但沒有用。你告訴我的方法，這是我如何使它工作，但不工作。 – Rebbeca

根據您最近對沒有空白的長詞的評論：默認情況下，瀏覽器不會打破單詞以便進行換行。相反，它會包裝在下一個空格或單詞中。一個很長的沒有空格的字符串會被解釋爲一個單詞。這種事情在現實世界中發生的可能性非常低。如果您仍然需要進行換行，則可以使用單詞換行：分詞。謝謝@加貝 – squeezebox

div標記和輸入標記的換行調整

回答

相關問題