[新着] Webテンプレートを仮オープンしました
word-break は、改行の仕方を指定するプロパティです。
幅いっぱいのところで自動改行（折り返し）が行われる際に、単語の区切りで改行するか、それとも単語内で改行するか、を指定します。
p {
word-break: break-all;
}
| word-break | normal … （英語：単語の区切りで改行｜日本語：行末で改行）デフォルト |
|---|---|
| break-all … （どの言語も行末で改行 = 単語内で改行） | |
| keep-all … （どの言語も単語の区切りで改行） |
※日本語の場合、keep-all を指定しても単語の区切りでは改行されません。（読点「、」で区切られてしまうようです）
<html>
<head>
<title>TAG index Webサイト</title>
<style type="text/css">
<!--
p {
width: 50%;
border: 1px #c0c0c0 solid;
}
.example1 { word-break: normal; }
.example2 { word-break: break-all; }
.example3 { word-break: keep-all; }
-->
</style>
</head>
<body>
<p class="example1">■normal<br>改行の仕方に関する、サンプルの ...</p>
<p class="example1">■normal<br>It attempts to write the ...</p>
<p class="example2">■break-all<br>改行の仕方に関する、サンプルの ...</p>
<p class="example2">■break-all<br>It attempts to write the ...</p>
<p class="example3">■keep-all<br>改行の仕方に関する、サンプルの ...</p>
<p class="example3">■keep-all<br>It attempts to write the sentences of the ...</p>
</body>
</html>
▼これをブラウザで見ると次のように表示されます
■normal
改行の仕方に関する、サンプルの文章を書いてみます。ブラウザの幅を動かすと、それぞれの違いが分かりやすいです。
■normal
It attempts to write the sentences of the sample about the way of the line feed. When moving the width of the browser, each difference is easy-to-understand.
■break-all
改行の仕方に関する、サンプルの文章を書いてみます。ブラウザの幅を動かすと、それぞれの違いが分かりやすいです。
■break-all
It attempts to write the sentences of the sample about the way of the line feed. When moving the width of the browser, each difference is easy-to-understand.
■keep-all
改行の仕方に関する、サンプルの文章を書いてみます。ブラウザの幅を動かすと、それぞれの違いが分かりやすいです。
■keep-all
It attempts to write the sentences of the sample about the way of the line feed. When moving the width of the browser, each difference is easy-to-understand.
