段落浮出容器

Question

我创建了一个容器来将我的内容集中到页面的中间位置，我有一个问题，段落标记继续从容器div中出来，并且不会自动换行。我总是发现容器使用了包装，我从来没有遇到过这个问题。

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

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

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

Answer 1

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

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

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

Answer 2

添加以下属性：

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

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