html - 漂浮在容器外的段落

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的工作小提琴的链接在这里。