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

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：抛弃qssxswpoi的css文件的position和left属性，并调整.content和<nav>的边距，使它们对齐。