ブラウザで、文章の折り返し（改行）が自動でされるのはどういったタイミングなのか、折り返しされないときがあるのはどういうときか、折り返しさせるには、あるいはさせないようにするにはどうするか、といった疑問に答えました。
ついでにスクロールバーも設定してみましょう。
Androidアプリを作成しました。
感情用のメモ帳です。
デフォルトの動作
折り返しの設定をする前に、まず何も設定しなかったときのデフォルトの折り返し動作について押さえておきましょう。
日本語のテキストの場合、設定された横幅を超えると、改行<br>を挿入しなくてもブラウザの方で自動で折り返してくれます。いま書いている文章も私の方で特に改行を挿入していません。スマートフォンから見ているなら、この一文は段落の４行目か５行目に当たるかもしれません。
折り返すタイミングはcssのwidthで設定された幅になります。
半角のアルファベットや数字の場合は、間にスペースがあるとこれも折り返ししてくれます。
下の例を見てください。
ABCDEFGHIJKLMNOPQRSTUVWXYZ ABCDEFGHIJKLMNOPQRSTUVWXYZ ABCDEFGHIJKLMNOPQRSTUVWXYZ
AからZまでのアルファベット群が半角のスペース区切りで書かれた一文です。
カタマリが３つありますよね。
見ている環境によって２行や３行に折り返しされていると思いますが、スペースがあるところで改行されます。
ではスペースのない、長いアルファベットや数字の場合はどうなるのでしょうか。
横幅（width）を250pxに設定し、そのなかでアルファベットと円周率を表示させてみます。
ABCDEFGHIJKLMNOPQRSTUVWXYZ
3.14159265358979323846264338327950
赤い枠線（横幅）を飛び出して表示されています。
このようにアルファベットや数字は折り返しされません。
折り返しさせる
デフォルトの動作から、スペースがないアルファベットや数字は、折り返しされないことが分かったと思うので、ではどうやって折り返しさせるのかと言うと、ふたつのCSSのプロパティがあります。
「overflow-wrap」の値を「break-word」にするか、
「word-break」の値を「break-all」にするか、
どちらかにします。
overflow-wrap: break-word;
word-break: break-all;動作の違いは、
「His name is Jugemujugemugokou.」という例文で見てみましょう。
html
<div class="box">
<p class="overflowwrap">1.His name is Jugemujugemugokou.</p>
<p class="wordbreak">2.His name is Jugemujugemugokou.</p>
</div>css
.box {
width: 250px;
border: 1px solid red;
}
.overflowwrap {
overflow-wrap: break-word;
}
.wordbreak {
word-break: break-all;
}1.His name is Jugemujugemugokou.
2.His name is Jugemujugemugokou.
１は「overflow-wrap: break-word;」に設定していて、なるべく単語の途中で改行されないような動作をします。
２は「word-break: break-all;」で、行からあふれるところで改行されています。
どちらがいいかはお好みで。
長い数字、長い単語など、widthに収まらない場合は、どちらであっても動作は同じです。
1.Jugemujugemugokounosurikirekaijarisuigyo.
2.Jugemujugemugokounosurikirekaijarisuigyo.
折り返しさせない
折り返しさせないようにするには、CSSのプロパティ「white-space」の値を「nowrap」に設定します。
white-space: nowrap;実際に適用させてみましょう。
未設定
死のうと思っていた。ことしの正月、よそから着物を一反もらった。お年玉としてである。これは夏に着る着物であろう。夏まで生きていようと思った。
white-space: nowrap;
死のうと思っていた。ことしの正月、よそ……
対象が日本語の場合、折り返しさせない設定に「wordbreak: keep-all」というのもあるのですが、これは文章の中に句読点（、や。）があると折り返しされてしまいます。
句読点のない文章ならこの設定でもOKです。
スクロールバーを設定する
折り返しさせないようにすると、文章が読めなくなってしまうこともあります。
そんなときにはスクロールバーの設定をしておきましょう。
overflowプロパティの値をautoにします。
overflow: auto;↓の行に適用させてみます。
この文章に上記のCSSと「white-space: nowrap;」を設定しています。スクロールバーは表示されているでしょうか。どうでしょうか。
「auto」にすることで必要なときにスクロールバーが表示されるので便利です。
ちなみに値を「scroll」にすると必要でないときにも表示されます。
↓の一行はパソコンから見ると機能しないスクロールバーが表示されます。
こんな風に。
autoはブラウザまかせでスクロールバーが表示されるので、どうしても信用できない、絶対表示させておきたいならscrollにしたらいいでしょう。
水平方向だけのスクロールバーを設定しておきたいなら「overflow-x」
垂直方向なら「overflow-y」が対応しています。
まとめ
折り返し動作について見てきました。
日本語は自動で折り返しされる。
英語（半角英数字）はスペースがあると折り返しされる。
させないようにするにはCSSで「white-space: nowrap;」
長い英単語や数字を折り返しさせるには、CSSで設定する。
「overflow-wrap: break-word;」
「word-break: break-all;」
のどちらか。
スクロールバーの設定
「overflow: auto;」
このページが少しでもお役に立てたのなら幸いです。