css - 段落自动换行

Question

在 DIV 中，我放了段落，但是当文本比 div 长时，它不会换行而是在 DIV 之外。我尝试使用： -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/