LineClamp

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

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

使用上の注意

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

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

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

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

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

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

LineClampの使用を避けるケース

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

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

モバイル環境の場合

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

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

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

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

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

Props