行数制限（トリミング）

定義

行数制限は、長さがバラバラなテキストを決めた行数で切り取り、切れた場所に省略記号（…）を 付けて「続きがありますよ」と知らせる処理です。リストやカードには見出しと説明文が入りますが、 実際のデータは1行のものもあれば5行のものもあって、長さは揃っていません。そこで各項目を 最大2行、3行のように決めておいて、あふれた部分を切り取れば、すべての項目の高さが揃って 画面がきれいに整います。1行だけ切るときと複数行を切るときで使うCSSが違うので、2つの ケースを分けて覚えておくと便利です。

なぜ重要か

行数制限がないと、項目ごとにテキストの長さがバラバラで高さが不揃いになり、カードが互いに ずれてグリッドが崩れて見えます。特に複数のカードを横に並べるリストやカードレイアウトでは、 この高さの差がそのまま整列の崩れにつながります。行数を固定しておけば、すべての項目が同じ 高さに揃い、目が楽にスキャンできる安定したリズムが生まれます。また、長い文章を丸ごと見せる 代わりに冒頭だけを先に見せれば、ユーザーは全体を開くかどうかを素早く判断できます。画面の スペースは限られているのに載せたい情報が多いモバイル環境では、この抑制が特に大切です。 つまり行数制限は、スペースを節約する技術であると同時に、スキャンしやすい画面をつくる整列の 道具でもあるのです。

よくある間違い

• 行数制限をかけたまま、元の文章を見る手段をまったく用意しない場合です。切り取られたテキストが 大切な情報なら、クリックで開く、詳細画面へ移動するなど、全体を確認できる道を必ず一緒に 用意しましょう。特に名前や住所のように、最後まで見て初めて意味が通る値が切れると困ります。
• 1行の切り取りと複数行の切り取りを混同する場合です。1行はtext-overflow: ellipsisに overflowとwhite-spaceの設定が揃って初めて動き、複数行は-webkit-line-clampを使いますが、 これらの条件を抜かすと省略記号が出てきません。
• 行数を決めておきながら、肝心の親要素の高さを固定しない場合です。行数を制限しても、 コンテナが内容に応じて伸びてしまうと整列を揃えたかった目的がぼやけるので、最大行数と 高さはセットで管理しましょう。

実務のヒント

• カードやリストでは、見出しと説明文の行数をあらかじめ決めて高さを揃えると整列が崩れません。 1行だけ切るときはtext-overflow: ellipsisを、複数行を切るときは-webkit-line-clampを 使いましょう。
• 切り取ったテキストには、title属性やツールチップで全体の内容を確認できるようにしておきましょう。 特に見出しのようにクリック対象になる要素は、元の文章を見失うとユーザーが何を押すのか わかりにくくなります。
• 行数制限だけに頼らず、元の文章の長さそのものも適度な範囲で管理しましょう。切る前の テキストが長すぎると、どの項目も冒頭が似通って見えて、区別がつかなくなることがあります。

関連概念