CSSで改行ルールを簡単設定!改行をコントロールする方法

みなさんこんにちは!
フリーランスプログラマーのsatoです。

みなさん、WEBサイトを作っていて

CSSでbrみたいに改行したい!
とにかく改行をさせたくない!
英単語の途中で改行させたくない
記号で改行させたくない

と思ったことはありませんか?

そんなあなたのために、今回はCSSで行える、改行操作について解説します。前半で「何ができるのか」「改行関係のパラメーター」を一式確認。後半で目的ごと設定方法について見ていきましょう。

とりあえず目的を達成させたいだけならば、目次から目的の部分に飛んで実戦してみてくださいね!

CSSで行える改行操作とは

CSSで改行操作を行うには、以下のパラメータが活用できます。

white-space・・・改行・スペース・タブの扱いを設定する
line-break・・・改行の規則事項を設定できる
word-wrap・・・英単語の折り返しを指定する
word-break・・・word-wrapとほぼ同等の機能(今回は説明を割愛します)

これらを駆使することで、様々な改行ルールを指定することが可能です。

次の項目で、順々に効果と使い方を見てみましょうか。

改行関係のパラメーター

では順々に見ていきましょう。

white-space

「white-space」は、テキスト内の改行・スペース・タブをどう扱うかを指定できます。

.test{
  white-space: [値];
}

設定方法は上記の通りで、この時値に使用できるのは「normal」「pre」「nowrap」「pre-wrap」「pre-line」の5種類です。

何を設定するかによって「どう表示されるのか」「改行がどう行われるのか」が決まります。使用できる値それぞれの効果を見ていきましょう。

normal

表示・・・連続した半角スペース・Tab・改行を全て1つの半角スペースとして表示

改行・・・改行は通常通りボックスの横幅到達時のみ

HTMLを使用するときのいつも通りの挙動をします。改行は横幅到達や、brタグを使用した時のみ行われます。テキストによる改行では、改行が行われないわけですね。また設定を行わなかった場合は「normal」が初期設定となっています。

pre

表示・・・半角スペース・Tab・改行をそのまま表示します。
改行・・・文字がボックスの横幅に到達しても改行を行いません。またテキスト内で行われた改行も反映されます。

表示も、改行も入力したテキストそののままになるわけです。

nowrap

表示・・・連続した半角スペース・Tab・改行を全て1つの半角スペースとして表示
改行・・・文字がボックスの横幅に到達しても改行を行いません。テキスト内で行われた改行は反映されます。

preの設定に似ていますが、表示するルールが少し違います。

pre-wrap

表示・・・半角スペース・Tab・改行をそのまま表示します。
改行・・・ボックスの横幅による改行を行われます。またテキスト内で行われた改行も反映されます。

preの横幅改行を行うバージョンですね!

pre-line

表示・・・連続した半角スペース・Tab・改行を全て1つの半角スペースとして表示
改行・・・ボックスの横幅到達時に改行が行われます。さらにソース内の改行も適用されます。

pre-wrapの表示ルールが少し違う設定です。

line-break

禁則処理のルールを設定します。

これを使用することで、「々」「...」「:」「;」「!」「?」といった記号使用時の改行を防ぐことが可能です。たとえば、「!」マークで改行を行われたら以下のような不自然な文章になってしまいますね。

こんにちは
!

それを防いだりできるわけです!

.test{
  line-break: [値];
}

使い方はこのような形式で、あたいには以下の4種類が設定可能です。

auto初期値です。禁則処理を行いません。
loose最低限の禁則処理ルールを適用します。
normal一般的な禁則処理ルールを適用します。「々」「…」「:」「;」「!」「?」が行頭に送られなくなります。
strict細かな禁則処理うルールを適用します。小さいカナ文字や、「〜」「-」「–」などの記号、行頭に送られなくなります。

word-wrap

通常、英単語は中途半端な位置で改行が行われないようになっています。

しかしこのパラメータを設定すれば中途半端な位置であっても強制的に改行するように設定することが可能です。

.test{
  word-wrap: [値];
}
normalデフォルトの設定です。英単語の途中で改行しない
break-word単語の途中であっても改行を行う

目的別、改行の設定方法!

前半でパラメーターを一式を確認してきました。

ここまでのことを組み合わせて使用すれば、一通りのことが実現が可能でしょう。とはいえ、実戦的な手法は目で見た方が早いと思います。

以下に、よく使う手法をまとめておくので参考にしてみてください。

CSSでbrみたいに改行したい!

例えばspanで区切った直後にCSSで改行をさせたいならば、以下のように書けば実現が可能です。

css部分:

.css-br::after {
  content: "\A" ;
  white-space: pre;
}

HTML部分:

一行目二行目

結果:

afterで要素の最後に「\A」を挟み込んでいます。「\A」は改行を意味するコードです。この際「white-space: pre;」を指定しているため、文字コードによる改行が行われるわけですね!

これをうまく活用できれば、brに頼らずとも改行を行うことが可能です!

改行をさせたくない!

横幅などで、勝手に改行をさせたくない時はどうすれば良いのでしょうか?

これも簡単ですね!

white-spaceで、横幅改行を行わないパラメーターを指定すれば良いんです。

例えば「pre」ですね!

css部分:

.no-new-line {
	white-space: pre;
	width: 300px;
	height: 50px;
	border: medium solid #000000;
}

HTML部分:

改行しない改行しない改行しない改行しない改行しない改行しない

 

結果:

英単語の途中で改行させたくない

前半で覚えた「word-wrap」を活用する時です!

break-wordを指定することで、英単語の途中での改行を防げます。

css部分:

.test-css{
  word-wrap: break-word;
}

HTML部分:

<span class="test-css">I want to be a programmer</span>

こうすることで、変なタイミングでの改行を防げます。

記号で改行させたくない

記号などを使用する直前で改行がはいってしまうと、見栄えば悪くなってしまいます。

それを防ぐために「line-break」を使いましょう。

厳しく行うのならば「strict」をパラメーターに設定しましょうか。これで「!」や「?」のタイミングで改行されることがなくなります。

css部分:

.test-css{
  line-break:strict;
}

HTML部分:

<span class="test-css">あいうえお!</span>

まとめ

今回はCSSで行う改行、全般について見てきました。

white-space・・・改行・スペース・タブの扱いを設定する
line-break・・・改行の規則事項を設定できる
word-wrap・・・英単語の折り返しを指定する

これらを駆使することで、改行ルールを細かく設定することができるわけですね!

上手に使っていきましょう。後半は、目的ごとにまとめてありますので、また別の目的ができた時は参考西てみてください。

LINEで送る
Pocket

SEからWebエンジニアへ転職した理由

侍エンジニア塾卒業生の小池さんは、以前は社内SEとして約5年ほど勤務していました。しかし業務内容は社内のヘルプデスク対応など、プログラムを書く仕事は全くなかったそうです。

SEながらプログラムを書けない現状に「将来仕事がなくなるんじゃないか」と不安を感じ、プログラミング学習を決意。

弊社スクールで学習し、無事ベンチャー企業のプログラマーとして転職に成功しました。そんな小池さんの学習法や転職体験談を伺いましたので、是非ご覧ください。

「プログラミングができないSEは仕事がなくなる」不安を感じたSEが未経験から転職成功するまで
更新日 : 2019年10月7日

書いた人

sato

sato

学生時代を含めると、かれこれ10年以上プログラマーとして過ごしています。
様々な言語や環境、プロジェクトに関わってきましたので、より実践的な記事をみなさんにお届きるよう情報発信していきます!

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説