HTML、CSSでの改行について

html HTML
css-3 CSS

brタグでの改行

<br>・・・brタグを入れた箇所を改行させることができる

使用例:html

<h3 class="text-center">【brを指定する】</h3>
<p> やあ、私の名前はケンシロウです。<br>どうぞケンと呼んでください。<br>私は18歳です。<br>私は年齢よりも老けて見えるかもしれない。</p>
<p style="color: #3104B4;">Hi, my name is Kenshiro. <br>Please call me Ken.I'm 18 years old. <br>I may look older for my age.</p>

使用例:画面

スクリーンショット 2016-10-01 19.32.10.png

word-breakプロパティを利用する

normal・・・英語等は単語の切れ目で改行される。日本語・中国語・韓国語等は表示範囲に合わせて改行される。

break-all・・・言語に関係なく表示範囲に合わせて改行される。

keep-all・・・言語に関係なく、単語の切れ目で改行されます。

使用例:html

<h3 class="text-center">【nomalを指定する】</h3>
<p style="word-break: normal;">やあ、私の名前はケンシロウです。どうぞケンと呼んでください。私は18歳です。私は年齢よりも老けて見えるかもしれない。</p>
<p style="word-break: normal;color: #3104B4;">Hi, my name is Kenshiro. Please call me Ken.I'm 18 years old. I may look older for my age.</p>
<h3 class="text-center">【break-allを指定する】</h3>
<p style="word-break: break-all;">やあ、私の名前はケンシロウです。どうぞケンと呼んでください。私は18歳です。私は年齢よりも老けて見えるかもしれない。</p>
<p style="word-break: break-all;color: #3104B4;">Hi, my name is Kenshiro. Please call me Ken.I'm 18 years old. I may look older for my age.</p>
<h3 class="text-center">【keep-allを指定する】</h3>
<p style="word-break: keep-all;">やあ、私の名前はケンシロウです。どうぞケンと呼んでください。私は18歳です。私は年齢よりも老けて見えるかもしれない。</p>
<p style="word-break: keep-all;color: #3104B4;">Hi, my name is Kenshiro. Please call me Ken.I'm 18 years old. I may look older for my age.</p>

使用例:画面

スクリーンショット 2016-10-01 20.01.34.png

white-spaceプロパティを利用する

normal・・・画面幅いっぱいのところで、自動的な折り返しが行わる。

nowrap・・・自動的な折り返しを禁止する。画面領域の幅を超えたテキストははみ出して表示される(横スクロールで確認可能)。

pre・・・HTMLに記述した改行の通りに表示される。

使用例:html

<h3 class="text-center">【normalを指定する】</h3>
<p style="white-space: normal;">やあ、私の名前はケンシロウです。どうぞケンと呼んでください。私は18歳です。私は年齢よりも老けて見えるかもしれない。</p>
<p style="white-space: normal;color: #3104B4;">Hi, my name is Kenshiro. Please call me Ken.I'm 18 years old. I may look older for my age.</p>
<h3 class="text-center">【nowrapを指定する】</h3>
<p style="white-space: nowrap;">やあ、私の名前はケンシロウです。どうぞケンと呼んでください。私は18歳です。私は年齢よりも老けて見えるかもしれない。</p>
<p style="white-space: nowrap;color: #3104B4;">Hi, my name is Kenshiro. Please call me Ken.I'm 18 years old. I may look older for my age.</p>
<h3 class="text-center">【preを指定する】</h3>
<p style="white-space: pre;">
    やあ、私の名前はケンシロウです。
    どうぞケンと呼んでください。
    私は18歳です。
    私は年齢よりも老けて見えるかもしれない。
</p>
<p style="white-space: pre;color: #3104B4;">Hi, my name is Kenshiro. Please call me Ken.I'm 18 years old. I may look older for my age.</p>

使用例:画面

スクリーンショット 2016-10-01 19.55.50.png

終わりに

恥ずかしながら、先日改行の位置ではまり、初めて「英語など外国語の場合「半角スペース」「-(ハイフン)」「/(スラッシュ)」などの直後で改行される」という事実を知りました。
それをきっかけに今回改行について色々調べてみようと、当記事を書きました。
ソースと、キャプチャを見て、改行位置の違いが伝われば幸いです。
他にも改行を指定する方法はあるので、そちらの追記とブラウザごとの検証結果を追記していくつもりです。