質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

2回答

526閲覧

html,css ブロック要素内での文字列の扱い、ブロックスペースから文字がはみ出る現象について

kato00

総合スコア71

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2018/04/06 06:46

表題の現象について原因が知りたいです。

下記コードで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パターンで文字の表示のされ方が違うのですが、何が違うのでしょうか??

その他必要な情報があれば追記いたしますのでおしゃってください。
宜しくお願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

提示のコードの場合、どちらもはみ出していると思いますがいかがでしょう。
スペースや改行の無いアルファベットは1単語として認識され、word-break:break-all;word-wrap:break-word;が指定されていなければ1行で表示されます。
提示の

html

1<div id="sample2"> 2 <p> 3 samplesamplesamplesamplesamplesample 4 </p> 5</div>

css

1#sample2{ 2 width: 100px; 3}

の中身を英語(samplesample…)から日本語(サンプルサンプル…)に変更するだけでも改行してくれると思います。

いや、中身は日本語ではなく英語やURLで、区切りは気にしないからとりあえず改行してほしい という場合はword-break:break-all;で。
改行せずに見えなくなってもいいならoverflow-x:hidden;を。
サンプルはyambejpさんがはってくれてますね。

あと、完全に質問の中身から外れますが、PRAYVACYではなくPRIVACYではないでしょうか

投稿2018/04/06 07:31

dit.

総合スコア3235

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

改行させたいならword-breakして
隠したいならoverflowを設定して下さい

CSS

1#sample1{ 2width: 100px; 3border:1px solid; 4word-break:break-all; 5} 6#sample2{ 7width: 100px; 8border:1px solid; 9overflow-x:hidden; 10}

HTML

1<div id="sample1"> 2 <p> 3 samplesamplesamplesamplesamplesample 4 </p> 5</div> 6<div id="sample2"> 7 <p> 8 samplesamplesamplesamplesamplesample 9 </p> 10</div>

投稿2018/04/06 07:01

yambejp

総合スコア114572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問