html - CSS段落を次の行に折り返す

Question

ブラウザウィンドウが縮小されたときに、段落テキストを次の行に折り返そうとしています。現在、同じ場所にとどまり、ブラウザウィンドウが段落テキストを超えて縮小すると、水平スクロールバーが表示されます。

CSS3 text-wrapプロパティを試しましたが、機能しなかったか、正しく使用しなかった可能性があります。

Answer 1

#headerdivを固定幅に設定しました。ブラウザで折り返したい場合は、パーセンテージを使用して幅を設定します。

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 fromを 削除する#headerと、ヘッダーが広くなり100%ます。つまり、「ブラウザーと同じ幅になるため、ブラウザーが小さくなると縮小します」。width: 106%fromを削除する#header-contentと、親と同じ幅になり#headerます。

補足：100％を超える幅を使用することは一般的に悪い考えであり、追跡が困難な奇妙なレイアウトの問題を提示します。通常、要素がビューポートのすぐ外側に配置されることを意味します。これはほとんどの場合望ましくありません。