フロントエンド開発のCSSでつまずきやすい「改行」について紹介します。
今回このテーマを選んだ理由は、改行して送信したはずの文章が改行されていない問題に遭遇したからです。
意外と解決に時間がかかるCSSの悩みは調べるのに苦労するので一例をこの記事にまとめました。
特に
・Webフロントエンドの開発経験がある方
を対象にしています。
改行した内容を要素に渡して表示する
今回、Vueの変数に改行された文章が渡される例を説明します。
Vueのマスタッシュ構文に入っている変数contentにユーザーが入力した内容が渡される場合、以下のような書き方になります。
改行した文章を入力する要素
<text-area v-model="content" />
改行した文章が渡される要素
<div class="content">
{{ content }}
</div>
変数contentに、「おはようございます！
今日も一日よろしくおねがいします！」
という改行した文が渡されるとすると
実際は**「おはようございます！ 今日も一日よろしくおねがいします！」**
という改行の状態が維持されない問題が起きます。
改行できないバグの原因はどこにあるのか？
実はバグが起きた原因は入力するデータを渡した先の要素によって起きたものです。
つまり、今回修正するべき対象は,
<div class="content">
{{ content }}
</div>
の方です。
送信内容の改行を保持するには
では、実際にどのようなコードを書けば改行した状態の文章をそのまま受け取ることができるのでしょうか？
対処法として以下２つのことを実装する必要があります。
1.divだけで囲われていたcontentの中にさらにspanタグを囲む。
2.divのclassにwhite-space: pre-lineをあてる。
white-spaceとはなにか？
white-spaceは要素内の半角スペース、改行の表示を指定するプロパティです。
指定できる値は以下のリンクで網羅されています。
https://developer.mozilla.org/ja/docs/Web/CSS/white-space
使用するプロパティの値の指定は細かい違いなのでどのようなスタイル変化があるのかを把握する程度に覚えておけば問題ないです。
プロパティの値の中でも自然に改行してくれるnormalはデフォルトで設定されていますが、今回の場合では改行の状態で表示ができないのでpre-lineに設定する必要があります。
修正すると以下のようなstyleになります。
template
<div class="content">
<span>{{ content }}</span>
</div>
style
.content {
white-space: pre-line;
}
この状態で実際に改行した文章を送信すると、改行した状態が反映されて表示されます。
先程の例文に従うと送信内容は
「おはようございます！
今日も一日よろしくおねがいします！」
となります。
CSSは奥が深く、簡単に修正できそうなバグも解決に時間がかかったりするので、どんな種類のプロパティがあってどんなことができるのか把握しておくことが重要だと思います。