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
}

<强>说明：从width: 928px中删除#header会导致标题变为100%宽，这意味着＆＃34;与浏览器一样宽，因此当浏览器变小时缩小＆＃34;。从width: 106%移除#header-content会使其与其父#header一样宽。

旁注：使用超过100％的宽度通常是一个坏主意，它们会出现难以追踪的奇怪布局问题，通常意味着元素最终会在视口外部，这几乎是总是不受欢迎的。

CSS段落换行到下一行

2 个答案: