CSSで要素の前後を改行させる方法【現役エンジニアが解説】

PROGRAM

今回は、CSSで要素の前後を改行させる方法について、前の場合と後の場合に分け、簡単に解説していきます。

要素の前を改行

要素の前を改行させるには、:beforeの擬似要素を使います。

contentプロパティの値を”\A”、white-spaceプロパティの値をpreにします。

.hoge:before{
    content:"\A";
    white-space:pre;
}

上記のコードでは、hogeのクラスの要素の前で、brタグのように改行させています。

要素の後を改行

要素の後を改行させるためには、:afterの擬似要素を使用します。

contentプロパティの値に”\A”、white-spaceプロパティの値にpreを指定します。

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

上記のコードでは、hogeというクラスの要素の後で、brタグのように改行させています。

途中改行を防止

記号だけ行頭に送られることを避ける場合、line-breakプロパティを用います。

line-breakプロパティの値をnormalにすると、!や?等の記号が行頭に送られません。

.hoge{
    line-break:normal; /* 値をstrictにすると、より行頭に送られない記号の種類が多くなる。 */
}

上記のコードでは、hogeというクラスを持つ要素の文字列に対し、改行によって記号が行頭に送られることがないようにしてます。