改行方法を変更する - word-break, overflow-wrap プロパティの利用 - CSS
CSSで改行方法を変更する方法を紹介します。
概要
CSSで改行方法を変更する方法として、word-break プロパティを設定する方法と
overflow-wrap プロパティを設定する方法があります。
この記事では、word-break プロパティ、overflow-wrap プロパティの設定による表示の違いを紹介します。
word-break プロパティ
word-break プロパティは以下の値を設定できます。
| 値 | 意味 |
|---|
| normal | 標準の改行処理です。英文は単語の切れ目で改行され、日本語文は単語の途中でも改行されます。 |
| keep-all | 英文も日本語文も単語の切れ目で改行されます。 |
| break-all | 英文も日本語文も単語の途中で改行されます。 |
| break-word | 英文も日本語文も単語の途中で改行されます。英文は単語の切れ目で改行できる場合は単語の切れ目で優先的に改行します。 |
コード
以下のCSS,HTMLファイルを作成します。
.OuterFrame {
margin: 0 0 0 0;
border: solid 4px #0094ff;
}
.SimpleFrame {
margin: 16px 16px 16px 16px;
border:solid 1px #808080;
width:200px;
word-break:normal;
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" type="text/css" href="wraptest.css" />
</head>
<body>
<div class="OuterFrame">
<div class="SimpleFrame">ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890</div>
<div class="SimpleFrame">あいうえおかきくけこさしすせそたちつてとなににぬねのはひふへほまみむめもやゆよらりるれろわをん</div>
<div class="SimpleFrame">I awoke to a vision of a white ceiling above, The light streaming in through the window was so bright, It felt like being left behind in a world of pure white. A fleeting thought crossed my mind, Could this perhaps be heaven?</div>
<div class="SimpleFrame">目を覚ました。白い天井が見える。窓から差し込む光はまぶしく、まるで純白の世界に取り残された錯覚を持った。刹那考えが脳裏をよぎる、もしやこれは天国か。</div>
</div>
</body>
</html>
解説
SimpleFrameクラスのword-breakプロパティを
.SimpleFrame {
margin: 16px 16px 16px 16px;
border:solid 1px #808080;
width:200px;
word-break:normal;
}
実行結果
Webブラウザで上記のページを表示します。
word-break:normal の場合
word-break:normalを設定した場合は、英文の場合は単語の切れ目で改行されます。単語の切れ目のない長い英文は改行されず表示されます。
日本語の文章は単語の途中でも改行されます。
word-break:keep-all の場合
word-break:keep-allを設定した場合は、英文の場合は単語の切れ目で改行され、単語の切れ目のない長い英文は改行されず表示されます。
日本語の文章も単語の途中で改行されなくなり、単語の切れ目のない日本語の文章は改行されません。
word-break:break-all の場合
word-break:break-allを設定した場合は、英文の場合も、日本語文の場合も単語の途中で改行されます。
word-break:break-word の場合
word-break:break-wordを設定した場合は、英文の場合も、日本語文の場合も単語の途中で改行されますが、
英文の場合は、枠をはみ出さないように、単語の切れ目で改行されます。
overflow-wrap プロパティ
overflow-wrap プロパティは以下の値を設定できます。
| 値 | 意味 |
|---|
| normal | 単語の切れ目のみで改行されます。 |
| anywhere | 領域をはみ出してしまう場合、単語の切れ目以外の位置でも改行されます。 |
| break-word | 領域をはみ出してしまう場合、単語の切れ目以外の位置でも改行されます。幅の計算に折り返し位置を考量しません。 |
コード
以下のCSS,HTMLファイルを作成します。
.OuterFrame {
margin-left:0px;
margin-top:0px;
margin-right:0px;
margin-bottom:0px;
border: solid 4px #0094ff;
}
.SimpleFrame {
margin-top: 16px;
margin-left: 16px;
margin-bottom: 16px;
margin-right: 16px;
border: solid 1px #808080;
width: 200px;
overflow-wrap: anywhere;
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" type="text/css" href="wraptest-overflow.css" />
</head>
<body>
<div class="OuterFrame">
<div class="SimpleFrame">ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890</div>
<div class="SimpleFrame">あいうえおかきくけこさしすせそたちつてとなににぬねのはひふへほまみむめもやゆよらりるれろわをん</div>
<div class="SimpleFrame">I awoke to a vision of a white ceiling above, The light streaming in through the window was so bright, It felt like being left behind in a world of pure white. A fleeting thought crossed my mind, Could this perhaps be heaven?</div>
<div class="SimpleFrame">目を覚ました。白い天井が見える。窓から差し込む光はまぶしく、まるで純白の世界に取り残された錯覚を持った。刹那考えが脳裏をよぎる、もしやこれは天国か。</div>
</div>
</body>
</html>
Webブラウザで上記のページを表示します。
実行結果
overflow-wrap:normal の場合
overflow-wrap:normal の場合は、英文は単語の切れ目のみで改行されるためはみ出します。
overflow-wrap:anywhere の場合
overflow-wrap:anywher の場合は単語の途中でも改行され枠内に収まります。
overflow-wrap:break-word の場合
overflow-wrap:break-word の場合も単語の途中でも改行され枠内に収まります。
著者
iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。
