表題の現象について原因が知りたいです。
下記コードでsample2のブロック要素内の文字列がブロックスペースからはみ出てしまいます。
ブロック要素の性質として下記2点があると認識しています。
1、ブロック要素にwidthを指定しない場合は、包括する子要素に合わせてブロック要素が広がっていく。
2、ブロック要素にwidthを指定した場合は、それを超える内容(文字)があった場合、ブロック要素からはみ出る
HTML
1<div id="sample2"> 2 <p> 3 samplesamplesamplesamplesamplesample 4 </p> 5</div>
css
1#sample2{ 2 width: 100px; 3}
ですが、下記コードの場合、widthの設定を指定しても文字列は自動で改行され、はみ出しません。
html
1<body> 2<div id="bodyWrapper"> 3<main> 4 5<div id="contents"> 6 <h1>PRAYVACY POLICY</h1> 7 <img class="headerBorder" src="img/base/index_bg.png" /> 8 9<h2>基本方針</h2> 10<p> 11 samplesamplesamplesamplesamplesamplesamplesamplesamplesamplesamplesamplesamplesamplesamplesamplesamplesamplesamplesamplesamplesamplesamplesamplesamplesamplesamplesamplesamplesamplesamplesamplesamplesamplesamplesample 12</p> 13</div><!--contents閉じタグ--> 14 15</main> 16 17</div><!--bodyWrapper閉じタグ--> 18 19</body>
css
1 2#bodyWrapper{ 3 width: 1200px; 4 border: 1px solid rgb(195, 28, 12); 5 margin: 0 auto; 6} 7 8#contents{ 9 width: 920px; 10 border: 1px solid rgb(96, 44, 93); 11 margin: 0 auto; 12} 13 14#contents h1{ 15 font-size: 30px; 16 color: rgb(75, 192, 230); 17 text-align: center; 18} 19 20#contents h2{ 21 border-bottom: 1px solid rgb(161, 163, 171); 22 border: 1px solid rgb(22, 122, 58); 23} 24
上記の場合、contentsにwidthを設定しているのに、文字列は自動で改行されます。
上記2パターンで文字の表示のされ方が違うのですが、何が違うのでしょうか??
その他必要な情報があれば追記いたしますのでおしゃってください。
宜しくお願いします。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。