mine

こんにちは、フロントエンドエンジニアの峯です。
前回は jQuery ライブラリを使ったカレンダー作成をご紹介しました。今回は痒い所に手が届く、改行命令についてご紹介します。

文字列改行について

cssを使って、文字の改行を制御する際、レイアウトの見栄えを優先してよく利用していたのが、justifyでした。（本来justifyは改行命令ではないのですが、、、。）
段落内のテキストを、綺麗に配置する際によく利用していたのですが、URLを記述する場合の改行で困る場面がありました。

以下をご覧ください。英語の一文、URLの記述です。
英語は基本、単語単位で改行されます。特に改行指定を行わない場合は枠に収まらない分は単語単位に改行され、左寄せの場合は右に余白が発生します。

See the Pen English text by mineyuji (@mineyuji) on CodePen.

word-breakで改行する

文章については justify を使って文字列の均等揃えを行うことで、余白は発生しなくなります。
均等揃えは文字間を調節することで枠いっぱいに文字を配置することができます。つまり文字間が発生しない文字列では効果を発揮しません。
以下は、文字列とURLそれぞれをjustifyとwork-breakで命令を加えた例です。

See the Pen English word-break x justify by mineyuji (@mineyuji) on CodePen.

.word_break {
  word-break: break-all; /* 枠からはみ出る際は改行 */
}
.justify {
  text-align: justify; /* 均等揃え */
};

word-breakで改行処理を行った方は、単語の途中でも枠の端に達すると改行されています。
justifyの例は、文字間が調整されて単語が切れることがなく改行されています。しかし、文字間が発生しないURLなどはご覧の通り、先ほどと変わらず、余白が残ったままです。

文字間のない文字列はword-breakで枠いっぱいに表示

今回テキストエリアのプレイスホルダーに、URLを記述して改行をword-breakで指定してみました。
以下のように枠いっぱいにURLが表示できています。文字間のないURLなどの文字列改行には最適の命令です。

See the Pen English word-break placeholder by mineyuji (@mineyuji) on CodePen.

終わりに

様々なサイズのデバイスが存在している昨今、どのデバイスでも綺麗に見せるために便利な命令がたくさんありますね。
word-breakは図形など、いびつな形をした枠の中にテキストを流し込んだりする際にも使えそうです。
テキストの制御はケースに合わせて、適した命令を利用できるようになりたいですね。
最後までお読みいただきありがとうございました!