あけましておめでとうございます。2021年もよろしくお願いします。

CSSで改行させる・させない自由自在【文章の折り返しに使えるコード】

CSSで改行させる・させない自由自在【文章の折り返しに使えるコード】

このブログなんだか読みにくいな…

改行の位置がおかしいのか…

やっぱり読みやすい文章に“改行”は大切だな。

 

上記の通り。

ウェブサイトで文章を読むときは改行の位置が超重要です。

あるCSSがうまく使えると、単語の途中で改行させないようにできたり、逆に単語の途中でも改行させるようにできたりするので、読みやすい文章を書くためにコードを覚えましょう。

本記事で紹介しているコードをコピペすればOKなので、ぶっちゃけ覚えなくてもOKです。

 

スポンサードサーチ

 

CSSで改行【文章の折り返しに使えるコード】

CSSで改行【文章の折り返しに使えるコード】

CSSで改行を指定するには「word-breakプロパティ」を使用します。

word-breakプロパティは下記の3つだけなので、必要に応じて使い分けましょう。

 

normal 言語別に決められているデフォルトの改行ルールを使用します。(下記参照)

日本語:単語の途中でも改行する

英語:単語の途中で改行しない

break-all 言語のデフォルト改行ルールを使用せず、単語の途中でも改行します
keep-all 言語のデフォルト改行ルールを使用せず、単語の途中では改行しません

 

word-breakプロパティ:使用例で解説

どういうことかを、それぞれ例を出しつつ解説しますね。

 

1. 【word-break: normal】言語の改行ルールに従う

#p {
 text-align: left;
 font-size: 14px;
 word-break: normal;
}

 

word-break: normalでカスタマイズすると、言語の改行ルールにしたがって改行する or 改行しないを判断するようになります。

 

1. 【word-break- normal】言語の改行ルールに従う

 

日本語の場合は「途中」という単語が「”途” と “中”」で改行されますが、英語は単語途中で改行されず「”a” と “sentence”」の間で改行されています。

 

2. 【word-break: break-all】単語の途中でも改行する

#p {
 text-align: left;
 font-size: 14px;
 word-break: break-all;
}

 

word-break: break-allでカスタマイズすると、言語の改行ルールにしたがうことなく、どんな単語でも途中で改行されます。

 

2. 【word-break- break-all】単語の途中でも改行する

 

上記の通り、英語であっても「”senten” “ce”」という具合に、単語の途中で改行が入ります。

 

3. 【word-break: keep-all】単語の途中では改行しない

#p {
 text-align: left;
 font-size: 14px;
 word-break: keep-all;
}

 

word-break: keep-allを使うと、言語の改行ルールにしたがうことなく、どんな単語も途中で改行されなくなります。

 

3. 【word-break- keep-all】単語の途中では改行しない

 

こんな感じに、日本語でも「途中」という単語が分断されず、その前に改行が入るようになりました。

 

本記事は以上です。

今どきのWordPressであれば、無料テーマであっても自動的に自然な改行になるようにコードが書かれているはずですが、問い合わせフォームを設置したり、テーブルタグを使用したりすると初期設定が反映されないこともあります。

そんなときは、カスタムCSSで、本記事で紹介したword-breakプロパティをお試しください。

終わり。