CSS段落换行到下一行

Question

当浏览器窗口缩小时，我试图将段落文本包装到下一行。 当前，它停留在同一位置，并且当浏览器窗口缩小到段落文本之外时，会出现水平滚动条。

我尝试了CSS3文本换行属性，但是它不起作用，或者我没有正确使用它。

Answer 1

您已将#header div设置为固定宽度。 如果您希望它与浏览器一起包装，请使用百分比设置宽度。

Answer 2

在CSS中更改此设置：

#header { 
 background: url("http://www.domainandseo.com/portfolio/page-view/images/header-bg.jpg") no-repeat transparent;
 min-height: 109px;
 /* width: 928px; *///  <-- remove this line
}

.header-content { 
 bottom: 15px;
 clear: both;
 margin-left: 190px;
 position: relative;
 /* width: 106%; *///  <-- remove this line
}

说明：删除#header的width: 928px将使标题变为100%宽，这意味着“与浏览器一样宽，因此当浏览器变width: 928px缩小。” 删除width: 106% #header-content的width: 106% ，使其与父级#header一样宽。

旁注：使用大于100％的宽度通常不是一个好主意，它们会带来难以跟踪的奇怪布局问题，通常这意味着元素最终仅出现在视口之外，这几乎总是不希望的。