Question

我在容器中包装文本时遇到问题。我已经搜索过，所有答案都放在word-wrap: break-word;中，但它对我不起作用。我一定是在做某事错了，但我找不到什么。

以下是网站，您可以搜索源代码：http://www.simplistico.net/

非常感谢任何帮助。

编辑：此外，容器背景为红色，因此您可以清楚地看到它。

Answer 1

为什么不在p标签上设置宽度？

p {
width:65%;
}

修改

也许我应该更清楚。如果已经在容器内部有p标签，则不一定需要像上面那样进行。你可以做类似的事情。

#container p { width:65%; }

这样只会影响指定容器内的p标记。

默认情况下，p标签会伸展100％的容器。请记住，分词和Word Wrap是CSS3属性，默认情况下仅适用于某些浏览器。 http://www.w3schools.com/cssref/css3_pr_word-break.asp

此外，分词只会在容器的边界处中断。并且因为你的另一个容器内的p标签的默认宽度为100％超过了你的“红色背景”容器。它将在该容器的边界处中断。从技术上讲，它正在发挥作用。

Answer 2

如果你要定位content，那么你必须明确地给它一个宽度。

尝试：

content { width: 600px; }

Answer 3

首先你的css文件应该是.content {}（现在有一个拼写错误 - content {} - 所以其中的任何内容都没有效果。）

不了解HTML5代码<nav>，因此我将<ul>代码设为了一个类：<ul class="nav">。然后为css文件添加了一个新样式：nav {float:left}并删除了p{word-wrap: break-word;}样式。这几乎完美。红色背景在内容结束的地方结束，因此需要处理。

更新：要允许红色背景颜色一直向下添加css样式.clearfloat{clear:both;}并在<br class="clearfloat" />内的最后一个段落之后放入html文件<content>。

UPDATE2：抛弃position的css文件的left和.content属性，并调整<nav>和<content>的边距，使它们对齐。< / p>

我需要在容器中包装长文本

3 个答案: