LineClamp

テキストが指定幅・高さを超えるときに省略表示しTooltipで全文を見せるためのコンポーネントです。長い文字列を行数制限で省略させるときに使います。

最大行数maxLinesに1〜6を指定すると、その行数に収まらなかったテキストが「…」で省略されます。

使用上の注意

LineClampはテキストの全文表示にTooltipもしくはDisclosureを利用しています。ユーザーが能動的に表示しないと情報は隠れたままであることに注意してください。

LineClampの使用を推奨するケース

付加的な情報を表示する場合

ユーザーの操作過程で「確認が必須ではない」程度の情報を表示する目的の場合はLineClampの使用を推奨します。

全文表示するとレイアウトが崩れて視認性が下がる場合

テーブルのセル内やリスト形式のUIにおいて視認性を確保する目的の場合はLineClmapの使用を推奨します。

LineClampの使用を避けるケース

単に情報を省略して小さく表示する場合

単に情報を省略する目的では使用しないでください。ただし、十分に表示領域を確保したうえでレイアウトが崩れる場合は、前述の「全文表示するとレイアウトが崩れて視認性が下がる場合」が適用されるものとし、LineClampの使用を推奨します。

重要な情報を省略する場合

ユーザーが把握しておかないと操作が進められないような重要な情報にはLineClampを使用せず、常に表示することを検討してください。

重要な情報の具体例は次のとおりです。

• パスワードに使用できる文字や、エラーになる入力値などの入力要件
• 入力エラーとなった際のエラーメッセージ
• 操作補助になる情報（ショートカットなど）
• ボタンなどの操作UIのラベル

モバイル

タッチデバイスではhover表示を前提としたTooltipは使用せず、Disclosureを使用してください。

使い方チェックリスト

LineClamp

参照元：使用上の注意 > LineClampの使用を推奨するケース > 付加的な情報を表示する場合 「使用上の注意 > LineClampの使用を推奨するケース > 付加的な情報を表示する場合」の本文へ移動

• Should

  ユーザーの操作過程で「確認が必須ではない」程度の情報を表示する場合は LineClamp の使用を検討してよい

参照元：使用上の注意 > LineClampの使用を推奨するケース > 全文表示するとレイアウトが崩れて視認性が下がる場合 「使用上の注意 > LineClampの使用を推奨するケース > 全文表示するとレイアウトが崩れて視認性が下がる場合」の本文へ移動

• Should

  テーブルのセル内やリスト形式の UI で視認性を確保する場合は LineClamp の使用を検討してよい

参照元：使用上の注意 > LineClampの使用を避けるケース > 単に情報を省略して小さく表示する場合 「使用上の注意 > LineClampの使用を避けるケース > 単に情報を省略して小さく表示する場合」の本文へ移動

• Avoid

  単に情報を省略する目的では LineClamp を使用しない

参照元：使用上の注意 > LineClampの使用を避けるケース > 重要な情報を省略する場合 「使用上の注意 > LineClampの使用を避けるケース > 重要な情報を省略する場合」の本文へ移動

• Avoid

  ユーザーが把握しておかないと操作が進められないような重要な情報には LineClamp を使用せず、常に表示することを検討する

  • パスワードに使用できる文字や、エラーになる入力値などの入力要件
  • 入力エラーとなった際のエラーメッセージ
  • 操作補助になる情報（ショートカットなど）
  • ボタンなどの操作 UI のラベル

参照元：モバイル 「モバイル」の本文へ移動

• Must

  タッチデバイスでは hover 表示を前提とした Tooltip は使用せず、Disclosure を使用する

Props