段落自动换行

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>

的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;
}

- MilosRogan

Answer 1

我在这里冒险猜测！ 但我相信你需要将 word-wrap: break-word; 放入 div css 中，而不是放在 <p> css 中。 对我有用！

编辑：

哦，等等，我可以看到你的错误了。 <p> 标签的名称不是 p.test，而是 #test！

- Scott Rowell

---

对于当前的观众来说，它似乎已经被更改为overflow-wrap，所以代码应该是：overflow-wrap:break-word; 可以查看https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap 获取更多信息。 - Tyler

Answer 2

在#content中添加word-wrap: break-word;

你还可以从你的p元素中删除这些样式。

- jbarnett

---

谢谢Scott，我已经解决了问题 :) @JBARNETT，你也谢谢，这个方法也行！ :) - MilosRogan

Answer 3

我认为您需要在#content中添加这两行代码。

将"Original Answer"翻译成"最初的回答"。

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

- Osman Hamashool

Answer 4

这将在每行打印每个句子，而不使用<br>

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

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

- muTheTechie