LineClamp

内包するテキストが指定した幅や高さを越えて存在するときに、Tooltipを用いて全文を表示するためのコンポーネントです。

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

使用上の注意

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

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

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

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

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

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

LineClampの使用を避けるケース

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

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

モバイル環境の場合

モバイル環境ではTooltipが機能しないので、LineClampの使用は避けてください。

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

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

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

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

Props

maxLines
1 2 3 4 5 6
ref
(instance: HTMLSpanElement) => void RefObject<HTMLSpanElement>