はじめまして！さこちゃんです。
今回は「CSSで行う文字落ち対策」ついてお話ししますよ〜
はじめに
下図は「Webデザイン情報をわかりやすくお届け！」
という14文字が途中で改行された表示例です。
文章の途中で文字が改行されてしまうのが気になりますね。
「Webデザイン情報を」の後に<br>を追記すれば解決しますが、
その場合、画面幅が狭まると自動改行が効き下図のような見え方になってしまいます。
ではそもそもなぜ自動改行されてしまうのでしょうか？
なぜ中途半端な位置で自動改行されてしまうのか？
ブラウザに表示される文章は、画面やウインドウの端で自動的に改行されます。
英語の場合、単語の区切りであるスペースの位置で改行されるため、
不自然な表示にはなりにくい構造です。
しかし日本語では、句読点の直前や長音の前など、
どこで改行しても基本的に問題ないとされています。
そのため、「単語の途中」や「最後の1文字の直前」といった
中途半端な位置で改行され、不自然な見た目になることがあります。
ベストプラクティス
それでは、どの画面幅においても中途半端に改行されない方法についてご紹介します。
ステップ1 HTMLを書く
まずは、改行位置を何も指定しない状態でHTMLソースを書きます。
<p>Webデザイン情報をわかりやすくお届け！</p>
ステップ2 任意の改行位置を決める
任意で改行させたい位置を決めていきます。
ここでは「Webデザイン情報を」「わかりやすく」「お届け！」を改行させたい位置とします。
下記が完成理想図です。
改行位置が決まったら、各要素をspanタグで囲っていきます。
<p><span>Webデザイン情報を</span><span>わかりやすく</span><span>お届け！</span></p>
ステップ3 CSSでinline-blockを指定する
ステップ2で記述したspan要素に対して、
displayプロパティに値「inline-block」を指定します。
このように指定すると、任意の箇所での自動改行ができるようになります。
下記が完成図です。
画面幅を狭めても文字が途中で落ちないようになりました。
これで作業は終了です。簡単ですね？！
まとめ
今回は、中途半端な位置で自動改行されてしまうのを防ぐ方法として、
inline-blockをご紹介いたしました。
実務でも使用頻度高めです。
ぜひ参考にしてみてください！
