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

【问题标题】：I need to wrap long text within a container我需要在容器中包装长文本
【发布时间】：2012-04-06 15:55:19
【问题描述】：

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

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

非常感谢任何帮助。

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

【问题讨论】：

它在您的容器之外。为什么它不在里面时会适合？您应该指定一个宽度或在容器内移动它。
@j08691 情况并非如此（至少现在已经不是这样了，也许同时代码已经更正了）。 css 文件中有一个错字。经过几次修改，一切正常。请参阅下面的答案。
我遇到了类似的问题 - 我的文本中没有空格，所以它没有分成两行。我知道这不是你的问题，但在此发布，因为我花了一段时间才意识到这一点。

标签： html css containers word-wrap

【解决方案1】：

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

p {
width:65%;
}

编辑：

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

#container p {
width:65%;
}

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

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

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

【讨论】：

@Amazonico 除非您真的希望每个页面的每个段落都为其容器的 65% 宽度，否则这将是一种不好的做法。如果需要完全设置某些标签的样式，.someSpecialPlace p {} 会更可取（除非整个网站只有几页）。
非常感谢你们。 Kris Hollenbeck 和developdaly 的答案结合起来帮助解决了这个问题，它的定位正是我想要的。再次感谢大家！
没有 ZZ-bb，它对我有好处。它只有几页，其中包含一些一般信息。

【解决方案2】：

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

试试：

content { width: 600px; }

【讨论】：

非常感谢你们。 Kris Hollenbeck 和developdaly 的答案结合起来帮助解决了这个问题，它的定位正是我想要的。再次感谢大家！

【解决方案3】：

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

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

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

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

【讨论】：