漂浮在容器外的段落[重复]答案

【问题标题】：Paragraph floating out of a container [duplicate]漂浮在容器外的段落[重复]
【发布时间】：2013-01-24 21:43:45
【问题描述】：

我创建了一个容器来将我的内容居中放置在页面中间，但我遇到了一个问题，即段落标签从容器 div 中延续出来并且不会自动换行。我总是发现容器可以使用包装，我从来没有遇到过这个问题。

.container { width: 1000px; margin: 0 auto; }

这是从 div.container 元素中浮出的 HTML

<div class="container">
    <p>TestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTest</p>
</div>

【问题讨论】：

这是因为<p> 元素内没有中断字符。
使用百分比而不是硬编码的 px 值。 width:1000px -> width:100%
@Alpay 这毫无意义
很抱歉我的问题弄错了。您的字符串继续在容器外的原因是，您的字符串没有任何空格字符，并且 html 解析器不知道在哪里分解该字符串。所以对于这种情况，你必须按照建议使用word-wrap: break-word; CSS 属性。
太好了，谢谢你的详细解释。

标签： html css

【解决方案1】：

问题是因为<p>里面的文字是一个没有空格的单词，你可以用下面的规则强制换行：

.container {
  word-wrap: break-word; /* Forces to wrap the word and cut it*/
  width: 1000px;
  margin: 0 auto;
}

这在旧浏览器上不起作用，所以要小心，另一种方法是使用 overflow: hidden 属性隐藏扩展文本。

【讨论】：

如果我想在单词的末尾换行，这样我们就不会中断实际的单词，而是换行？
如果没有空格，怎么知道单词在哪里结束？
如果你的单词有空格，浏览器会自动打破它而不应用任何规则。
太好了，我真的不知道这个，现在觉得秃了哈哈。我们每天都在学习新事物：P

【解决方案2】：

添加这些属性：

overflow:hidden;
word-wrap: break-word;

宽度设置为 100px 的工作 fiddle 的链接是 here。

【讨论】：