HTML-CSS 入門講座

HTML-CSS 入門講座

こんにちは!
今日も頑張ろう

文字の折り返し

説明

概要

ボックス(div タグなど)内に記述してあるテキストがはみ出している場合の折り返しを制御するには、word-break プロパティ、word-wrap プロパティ、white-space プロパティなどを使用します。

word-break プロパティを使用すると折り返し(自動改行)する位置を制御することができます。折り返しの位置は、英語と日本語で動作が異なるので注意が必要です。

word-wrap プロパティを使用すると 1 行に収まらない英単語の折り返しを制御することができます。

white-space プロパティを使用するとホワイトスペース(連続するスペース、タブ、改行など)の表示方法を制御することができます。

white-space プロパティに pre を指定すると改行コードも、そのまま表示されます。(改行されます)

文字の折り返し

(1) サンプル表示

(2) ソースコード

ソースコード表示

HTML


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>サンプル(文字の折り返し)</title>
<style>
body {
	margin: 0;
}
p {
	margin: 20px 0 20px 20px;
}
pre {
	margin: 20px 0 20px 20px;
}
.container {
	border: #ccc 1px solid;
}
.box {
	width: 440px;
	border: 1px #444 solid;
	padding: 20px;
	margin: 20px 20px 20px 20px;
}
.box1-1 {
}
.box2-1 {
	word-break: normal;
}
.box2-2 {
	word-break: break-all;
}
.box2-3 {
	word-break: keep-all;;
}
.box3-1 {
	word-wrap: normal;
}
.box3-2 {
	word-wrap: break-word;
}
.box4-1 {
	white-space: normal;
}
.box4-2 {
	white-space: pre;
}
.box4-3 {
	white-space: nowrap;
}
</style>
</head>
<body>
	<div class="container">
		<p>■表示で使用するサンプルテキスト</p>
		<pre><code>
123456789012345678901234567890123456789012345678901234567890&lt;br&gt;
1 22  333   4444    55555     666666      7777777       88888888        999999999         0000000000&lt;br&gt;
Former Prime Minister Shinzo Abe's supporters' association hosted a dinner the day before the "Sakura wo Miru Kai", and Mr. Abe had to bear a total of about 9.16 million yen as a shortage of expenses in the five years until 2019. I found out by interviewing the people concerned. It was also found that the receipt issued by the hotel that received the payment was addressed to the fund management organization "Shinwakai" represented by Mr. Abe.&lt;br&gt;
安倍晋三前首相の後援会が「桜を見る会」の前日に主催した夕食会をめぐり、安倍氏側が2019年までの5年間に、費用の不足分として総額約916万円を負担していたことが、関係者への取材で分かった。支払いを受けたホテル側が発行した領収書の宛名が、安倍氏が代表を務める資金管理団体「晋和会」だったことも判明。&lt;br&gt;
</code></pre>
		<p>■word-break: normal(初期値);(英語は単語単位で改行、日本語は表示範囲で改行)</p>
		<div class="box box2-1">
word-break: normal;<br>
英語は単語の途中で改行しないで日本語は表示範囲に合わせて改行<br>
123456789012345678901234567890123456789012345678901234567890<br>
1 22  333   4444    55555     666666      7777777       88888888        999999999         0000000000<br>
Former Prime Minister Shinzo Abe's supporters' association hosted a dinner the day before the "Sakura wo Miru Kai", and Mr. Abe had to bear a total of about 9.16 million yen as a shortage of expenses in the five years until 2019. I found out by interviewing the people concerned. It was also found that the receipt issued by the hotel that received the payment was addressed to the fund management organization "Shinwakai" represented by Mr. Abe.<br>
安倍晋三前首相の後援会が「桜を見る会」の前日に主催した夕食会をめぐり、安倍氏側が2019年までの5年間に、費用の不足分として総額約916万円を負担していたことが、関係者への取材で分かった。支払いを受けたホテル側が発行した領収書の宛名が、安倍氏が代表を務める資金管理団体「晋和会」だったことも判明。<br>
</div>
		<p>■word-break: break-all;(英語も日本語も表示範囲で改行)</p>
		<div class="box box2-2">
word-break: break-all;<br>
表示範囲に合わせて改行<br>
123456789012345678901234567890123456789012345678901234567890<br>
1 22  333   4444    55555     666666      7777777       88888888        999999999         0000000000<br>
Former Prime Minister Shinzo Abe's supporters' association hosted a dinner the day before the "Sakura wo Miru Kai", and Mr. Abe had to bear a total of about 9.16 million yen as a shortage of expenses in the five years until 2019. I found out by interviewing the people concerned. It was also found that the receipt issued by the hotel that received the payment was addressed to the fund management organization "Shinwakai" represented by Mr. Abe.<br>
安倍晋三前首相の後援会が「桜を見る会」の前日に主催した夕食会をめぐり、安倍氏側が2019年までの5年間に、費用の不足分として総額約916万円を負担していたことが、関係者への取材で分かった。支払いを受けたホテル側が発行した領収書の宛名が、安倍氏が代表を務める資金管理団体「晋和会」だったことも判明。<br>
</div>
		<p>■word-break: keep-all;(英語も日本語も単語単位で改行)</p>
		<div class="box box2-3">
word-break: keep-all;<br>
単語の切れ目で改行<br>
123456789012345678901234567890123456789012345678901234567890<br>
1 22  333   4444    55555     666666      7777777       88888888        999999999         0000000000<br>
Former Prime Minister Shinzo Abe's supporters' association hosted a dinner the day before the "Sakura wo Miru Kai", and Mr. Abe had to bear a total of about 9.16 million yen as a shortage of expenses in the five years until 2019. I found out by interviewing the people concerned. It was also found that the receipt issued by the hotel that received the payment was addressed to the fund management organization "Shinwakai" represented by Mr. Abe.<br>
安倍晋三前首相の後援会が「桜を見る会」の前日に主催した夕食会をめぐり、安倍氏側が2019年までの5年間に、費用の不足分として総額約916万円を負担していたことが、関係者への取材で分かった。支払いを受けたホテル側が発行した領収書の宛名が、安倍氏が代表を務める資金管理団体「晋和会」だったことも判明。<br>
</div>
		<p>■word-wrap: normal(初期値);(英語単語が1行に入りきらない場合も改行しない)</p>
		<div class="box box3-1">
word-wrap: normal;<br>
単語の途中で改行しない<br>
123456789012345678901234567890123456789012345678901234567890<br>
1 22  333   4444    55555     666666      7777777       88888888        999999999         0000000000<br>
Former Prime Minister Shinzo Abe's supporters' association hosted a dinner the day before the "Sakura wo Miru Kai", and Mr. Abe had to bear a total of about 9.16 million yen as a shortage of expenses in the five years until 2019. I found out by interviewing the people concerned. It was also found that the receipt issued by the hotel that received the payment was addressed to the fund management organization "Shinwakai" represented by Mr. Abe.<br>
安倍晋三前首相の後援会が「桜を見る会」の前日に主催した夕食会をめぐり、安倍氏側が2019年までの5年間に、費用の不足分として総額約916万円を負担していたことが、関係者への取材で分かった。支払いを受けたホテル側が発行した領収書の宛名が、安倍氏が代表を務める資金管理団体「晋和会」だったことも判明。<br>
</div>
		<p>■word-wrap: break-all;(英語単語が1行に入りきらない場合は表示範囲で改行)</p>
		<div class="box box3-2">
word-wrap: break-word;<br>
単語の途中でも改行<br>
123456789012345678901234567890123456789012345678901234567890<br>
1 22  333   4444    55555     666666      7777777       88888888        999999999         0000000000<br>
Former Prime Minister Shinzo Abe's supporters' association hosted a dinner the day before the "Sakura wo Miru Kai", and Mr. Abe had to bear a total of about 9.16 million yen as a shortage of expenses in the five years until 2019. I found out by interviewing the people concerned. It was also found that the receipt issued by the hotel that received the payment was addressed to the fund management organization "Shinwakai" represented by Mr. Abe.<br>
安倍晋三前首相の後援会が「桜を見る会」の前日に主催した夕食会をめぐり、安倍氏側が2019年までの5年間に、費用の不足分として総額約916万円を負担していたことが、関係者への取材で分かった。支払いを受けたホテル側が発行した領収書の宛名が、安倍氏が代表を務める資金管理団体「晋和会」だったことも判明。<br>
</div>
		<p>■white-space: normal(初期値);(ホワイトスペースを1つのスペースとして表示)</p>
		<div class="box box4-1">
white-space: normal;<br>
1つの半角スペースとして表示<br>
123456789012345678901234567890123456789012345678901234567890<br>
1 22  333   4444    55555     666666      7777777       88888888        999999999         0000000000<br>
Former Prime Minister Shinzo Abe's supporters' association hosted a dinner the day before the "Sakura wo Miru Kai", and Mr. Abe had to bear a total of about 9.16 million yen as a shortage of expenses in the five years until 2019. I found out by interviewing the people concerned. It was also found that the receipt issued by the hotel that received the payment was addressed to the fund management organization "Shinwakai" represented by Mr. Abe.<br>
安倍晋三前首相の後援会が「桜を見る会」の前日に主催した夕食会をめぐり、安倍氏側が2019年までの5年間に、費用の不足分として総額約916万円を負担していたことが、関係者への取材で分かった。支払いを受けたホテル側が発行した領収書の宛名が、安倍氏が代表を務める資金管理団体「晋和会」だったことも判明。<br>
</div>
		<p>■white-space: pre;(ホワイトスペースも、そのまま表示し表示範囲での改行はしない)<br>(改行も、そのまま表示するので br タグがあると余分な改行が発生します)</p>
		<div class="box box4-2">
white-space: pre;<br>
そのまま表示<br>
123456789012345678901234567890123456789012345678901234567890<br>
1 22  333   4444    55555     666666      7777777       88888888        999999999         0000000000<br>
Former Prime Minister Shinzo Abe's supporters' association hosted a dinner the day before the "Sakura wo Miru Kai", and Mr. Abe had to bear a total of about 9.16 million yen as a shortage of expenses in the five years until 2019. I found out by interviewing the people concerned. It was also found that the receipt issued by the hotel that received the payment was addressed to the fund management organization "Shinwakai" represented by Mr. Abe.<br>
安倍晋三前首相の後援会が「桜を見る会」の前日に主催した夕食会をめぐり、安倍氏側が2019年までの5年間に、費用の不足分として総額約916万円を負担していたことが、関係者への取材で分かった。支払いを受けたホテル側が発行した領収書の宛名が、安倍氏が代表を務める資金管理団体「晋和会」だったことも判明。<br>
</div>
		<p>■white-space: nowrap;(ホワイトスペースを1つのスペースとして表示し表示範囲での改行はしない)</p>
		<div class="box box4-3">
white-space: nowrap;<br>
1つの半角スペースとして表示して表示範囲に合わせて改行しない<br>
123456789012345678901234567890123456789012345678901234567890<br>
1 22  333   4444    55555     666666      7777777       88888888        999999999         0000000000<br>
Former Prime Minister Shinzo Abe's supporters' association hosted a dinner the day before the "Sakura wo Miru Kai", and Mr. Abe had to bear a total of about 9.16 million yen as a shortage of expenses in the five years until 2019. I found out by interviewing the people concerned. It was also found that the receipt issued by the hotel that received the payment was addressed to the fund management organization "Shinwakai" represented by Mr. Abe.<br>
安倍晋三前首相の後援会が「桜を見る会」の前日に主催した夕食会をめぐり、安倍氏側が2019年までの5年間に、費用の不足分として総額約916万円を負担していたことが、関係者への取材で分かった。支払いを受けたホテル側が発行した領収書の宛名が、安倍氏が代表を務める資金管理団体「晋和会」だったことも判明。<br>
</div>
	</div>
</body>
</html>

ロケット本体
PAGE
TOP
ロケット炎