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>