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/

段落自动换行

4 个答案: