CSS段落换行到下一行

Question

I am trying to wrap a paragraph text to the next line when the browser-window is shrinked. Currently, it stays in the same place and a horizontal scroll bar appears when the browser window shrinks beyond the paragraph text.

I tried CSS3 text-wrap property but it didn't work, or maybe I didn't use it right.

Answer 1

You've got your #header div set to a fixed width. If you want it to wrap with the browser, set the width using percentages.

Answer 2

Change this in your 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
}

Explanation: Removing the width: 928px from #header will cause the header to become 100% wide, which means "as wide as the browser, so shrink when the browser gets smaller". Removing the width: 106% from #header-content makes it as wide as it's parent #header .

A side note: using widths that are more than 100% are generally a bad idea, they present strange layout issues that are hard to trace and usually it means that elements end up just outside the viewport, which is almost always undesirable.