こんにちは、ユアサです。
業務の中で、動的ページ内で長文テキストを表示した際にデザインが崩れてしまうといった見落としが何度かあったので、今回は動的ページにおける長文テキスト対策について自分の備忘録も兼ねてまとめていきます。
①コンテンツ範囲からはみ出す
CMS管理のお知らせ記事の一覧ページやコーポレートサイトでよく見る店舗情報ページなど、動的ページではできる限りどんな内容が入力・登録されてもデザインが崩れないよう対応しておきたいですよね。注意しておきたいポイントの一つとしてよく挙げられるのが『長文テキスト』です。
しかし、長文テキストが入る想定をせずにコーディングを進行すると思わぬミスが生まれます。長文テキスト対応を忘れて起こるミスの筆頭としてまず挙がるものといえばコンテンツ範囲からはみ出す現象でしょう。
以下のコードをご覧ください。
See the Pen Untitled by felly (@felly00505) on CodePen.
今回は新着情報の記事一覧のような状況を想定しました。一見整っているように見えますが、二番目のカラムの長文テキストがコンテンツ範囲からはみ出してしまっています。
CSS内をよく見てみると、クラス名「news」に対してgrid-template-rows: 300px;が指定されています。つまりnewsが固定の高さを持っているため、子要素が長文テキストでも高さが広がっていかなかった訳ですね。
要素の高さを固定にしたいのでgrid-template-rowsを指定していましたが、display: grid;が指定されている際は基本的に高さが揃う仕様になっているので、newsのgrid-template-rows: 300px;を外すことで解決します。長文テキストが入ると縦に伸びてしまいますが、コンテンツ範囲からはみ出すことがなくなります。
また最低限◯◯px分のコンテンツの高さが欲しい場合は、news-listにmin-heightを指定することで実装できます。
See the Pen Untitled by felly (@felly00505) on CodePen.
長文テキストが入ることによって縦に伸びるのを阻止したい場合は、長文テキストを省略し三点リーダーにまとめる方法もあります。省略したいテキストが入っているタグに対してwhite-space: nowrap; overflow: hidden; text-overflow: ellipsis;を指定します。
具体的な文字数・行数の制限まではできませんが、各news-listのddタグ内のテキストが1行に統一されていて見栄えは悪くありません。
See the Pen Untitled by felly (@felly00505) on CodePen.
複数行まで表示してそれ以降のテキストを三点リーダーにまとめる方法もあります。こちらも同じように省略したいテキストが入っているタグに対して、overflow: hidden;以外は1行に収める方法とは違いdisplay: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 表示したい最大行数;を指定します。
See the Pen Untitled by felly (@felly00505) on CodePen.
②要素が広がりすぎる
今度は長文テキストが入ることによって要素が広がりすぎてしまい、親要素から横にはみ出してしまう現象についてまとめていきます。まずは以下のコードをご覧ください。
See the Pen Untitled by felly (@felly00505) on CodePen.
同じく新着情報の記事一覧で考えていきます。一見どこも問題なさそうに見えます。
では試しに長文テキストを入れてみます。
See the Pen bolume_text-sizeover_error by felly (@felly00505) on CodePen.
あれ？グリッドレイアウトであれば長文テキストが入っただけでなんではみ出るの？と感じた方もいるかもしれませんが、よく見てみると長文テキストが入っているddタグにwhite-space: nowrap;が指定されています。
今回は敢えてこのミスを仕込みましたが、white-space: nowrap;に限らずコーディング中に残ってしまっていた余計なプロパティ一つが原因でここまでデザインが崩れてしまうこともあるのでよく気をつけておきたいですね。
※white-space: nowrap;が必要な場合は、①で紹介したコードのように幅を1frやautoではなく、数値を設定する必要があります。
③長文テキストが他要素に影響を及ぼす
長文テキストが入ることによって、他要素のデザインを崩してしまう場合もあります。まずは以下のコードをご覧ください。
See the Pen Untitled by felly (@felly00505) on CodePen.
今回は会社概要欄のようなデザインで、コンテンツ幅が狭い状況を想定しました。クラス名「data_list」の要素にdisplay: flex;を指定してdt・ddタグを横並びにしていますが、長文テキストが入っている要素の方はdtタグがddタグに圧迫されて改行してしまっています。
display: flex;を使用している際にこの現象は特に注意するべき点で、形を崩したくない要素に対してflex-shrink: 0;を指定することで対策できます。
See the Pen Untitled by felly (@felly00505) on CodePen.
まとめ
動的ページにおける長文テキスト対応についてまとめました。
自分はこの内容が結構見落としがちなので改めて重々気をつけていきます・・・・・。
