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

Question

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

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

任何帮助是极大的赞赏。

编辑：另外，容器背景是红色的，所以你可以清楚地看到它。

Answer 1

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

p {
width:65%;
}

编辑：

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

#container p {
width:65%;
}

这样，只有指定容器内的 p 标签会受到影响。

默认情况下，ap 标签将拉伸其容器的 100%。另外请记住，分词和自动换行是 CSS3 属性，默认情况下仅适用于某些浏览器。http://www.w3schools.com/cssref/css3_pr_word-break.asp

分词也只会在容器的边界处中断。并且因为您在另一个容器内有一个默认宽度为 100% 的 ap 标签，超出了您的“红色背景”容器。它将在该容器的边界处破裂。所以从技术上讲，它是有效的。

Answer 2

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

尝试：

content { width: 600px; }

Answer 3

首先你的css文件应该是.content {}（现在有一个错字——content {}所以它里面的任何东西都没有任何效果）。

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

更新：为了让红色背景颜色一直向下添加一个 css 样式.clearfloat{clear:both;}并将其放入 .html 文件<br class="clearfloat" />中最后一段之后的 html 文件中<content>。

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