レスポンシブデザインでコーディングをしていると、必ず遭遇するのがテキストの改行。画面幅によって綺麗に改行するのが難しく頭を悩ませる要素の1つです。
PCでは綺麗に1行で表示されているのにSPでは2行になってしまい、不恰好なになってしまう事はあるあるですよね。また、渡されたデザインがPCとSPで改行位置が異なる事もあります。
当記事では、そんな厄介なテキスト改行をHTMLとCSSで行う方法について解説します。
目次
デバイス別に改行位置を分ける
PCでは1行表示でSPでは改行という場合に使える方法です。
HTMLのbrタグにclassを振り、CSSのメディアクエリとdisplayプロパティで表示非表示を切り替えて実装します。
See the Pen break-br by リュウ (@ryu0947) on CodePen.
このようにシンプルかつ簡単な方法で実装可能です。ただ一文の中に複数のbrを置くのは極力避けましょう。複数brタグを置くとデバイスごとで改行位置がバラバラになってしまうからです。
特定の単語の位置で改行する
改行の位置の指定はないものの、SPでの改行位置が綺麗にならない場合やテキスト区切りで改行させたい場合に使える方法です。
See the Pen break-span by リュウ (@ryu0947) on CodePen.
改行させたいテキストをspanタグで囲み、そのspanタグにdisplay: inline-blockを指定する事で、spanタグで囲った位置でテキストを改行出来ます。
特に見出しなどはキーワードを含んでいる事が多いので、キーワードの途中で改行させたくないという要望があった時に使える方法です。
そもそも改行をさせない
利用シーンは限られますが、テキストを改行させない方法をご紹介します。
See the Pen no-wrap by リュウ (@ryu0947) on CodePen.
white-spaceプロパティは、HTMLコード内の半角スペース・タブ・改行をどのように扱うかを設定するプロパティです。
white-space – CSS: カスケーディングスタイルシート | MDN
white-space: nowrapを指定するとテキストは改行されなくなります。ただ、改行されなくなるのでSPのような画面幅が狭いデバイスだと画面幅を突き抜けて横スクロール発生の原因となります。
利用シーンとしては、ブランドや会社のキャッチコピーのような絶対に改行させたくないテキストなどに指定します。ただ前述の問題があるので、フォントサイズの変更などで対応した方が良い場合が多いです。
英文を改行させる
英語は日本語と改行の位置が異なります。英語は単語単位で改行をするので、表示しているデバイスによっては画面幅を突き抜けて表示されてしまう事があります。
上の画像のように長い単語が連続すると画面を突き抜けて表示されてしまう事があります。見落としがちなミスですね。英文を日本語と同じように改行する方法を解説します。
See the Pen english-break by リュウ (@ryu0947) on CodePen.
word-break: break-wordを指定することで英文を日本語と同じように改行出来ます。word-breakプロパティは、改行しないとコンテナからテキストがはみ出てしまう場合にテキストを改行するかを指定します。
word-break – CSS: カスケーディングスタイルシート | MDN
たまにword-break: break-allを使っているサイトを見かけますが、こちらは禁則処理を無視して改行を行うので、基本的にはword-break: break-wordを使いましょう。
行数を指定してテキストを非表示にする
こちらは、テキストの表示を制限して文末に3点リーダーを表示する方法です。主にパンくずリストやブログカードに使われています。
1行と複数行で対応方法が変わるためそれぞれ解説します。
1行の場合
1行でテキストを区切りたい場合は、text-overflow: ellipsisを使います。text-overflowプロパティは、コンテナからはみ出したテキストをどのように表示するのかを設定します。
See the Pen one-line by リュウ (@ryu0947) on CodePen.
text-overflowプロパティ自体に文章量を制限する効果はないので、widthで横幅を指定したうえで、white-space: nowrapでテキストの改行を禁止して、overflow: hiddenではみ出たテキストを非表示にする事で実現出来ます。
text-overflow – CSS: カスケーディングスタイルシート | MDN
複数行の場合
複数行にわたってテキストを区切る方法を解説します。
See the Pen Untitled by リュウ (@ryu0947) on CodePen.
display:-webkit-boxと-webkit-box-orient: verticalが指定されている状態で-webkit-line-clampプロパティで何行表示させるのかを設定します。
overflow: hiddenを指定しないと-webkit-line-clampプロパティで区切った行数以降も表示されてしまうので、必ず一緒に指定しましょう。
-webkit-line-clamp – CSS: カスケーディングスタイルシート | MDN
まとめ
HTMLとCSSでテキストの改行を行う方法について解説しました。
「どんな時でも使える万能な方法」は無いので、状況に応じて適切な対応を取れるようにしておかなければなりません。その中で当記事が何かのお役に立てれば嬉しい限りです。
最後までお読み頂きありがとうございました！
