段落自動換行

Question

在DIV中我放了段落，但是當文本比div更長時，它不會創建新行但是在DIV之外。我嘗試使用： -moz-hyphens:auto; -ms-hyphens:auto; -webkit-hyphens:auto; hyphens:auto; word-wrap:break-word; -moz-hyphens:auto; -ms-hyphens:auto; -webkit-hyphens:auto; hyphens:auto; word-wrap:break-word; 但它不起作用。任何建議？

這是div的代碼：

<div id="content">
<p id="test">tfufygigighfetefddddddddddddsssssssssssssssssssssssssssssssssssssssssssfffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff</p>
</div>

div的css代碼：

#content {
float:left;
position:absolute;
background-color:#D4D3D0;
height:500px;
width:80%;
}

和段落的CSS：

p.test {
-moz-hyphens:auto;
-ms-hyphens:auto;
-webkit-hyphens:auto;
hyphens:auto;
word-wrap:break-word;
}

Answer 1

我要出去了！ 但我相信你需要把word-wrap: break-word; 在div css中，而不是<p> css。 這個對我有用！

編輯：

哦等等，我能看出你做錯了什么。 <p>標簽的名稱不是p.test它是#test ！

Answer 2

添加word-wrap: break-word; 到#content

您還可以從p元素中刪除這些樣式。

Answer 3

我相信你需要在#content中添加這兩行

#content{
    word-wrap: break-word;
    white-space:pre-wrap;
}

Answer 4

這將打印每行中的每個句子，沒有<br>

<p style="font-family:courier;white-space: pre;">
First Line
Second Line
Third Line
</p>

例如，檢查jsfiddle http://jsfiddle.net/muthupandiant/sgp8rjfs/