CSS を使用してテキストの長さ制限を N 行に設定する

開発者は、HTML 要素のサイズに基づいてテキストを切り詰める必要がある場合があります。たとえば、div 要素の幅は 100px で、一部の文字しか保持できません。したがって、CSS を使用してテキストを切り詰める必要があります。

ただし、JavaScript を使用してテキストを切り詰めることはできますが、問題が発生する可能性があります。例えば、100pxで18文字まで表示できますが、文字の大文字化により表示される文字数が少なくなる場合があります。この場合、18文字表示するとあふれてしまう可能性があります。

したがって、CSS を使用してテキストを切り詰める方が良い考えです。

ユーザーは、CSS を使用して次の構文を使用してテキスト制限を N 行に設定できます。

上記の構文では、overflow を非表示に設定し、「text-overflow: elipsis」を設定してテキストを切り詰めます。 「-webkit-line-clamp」プロパティの値は、表示する行数を示します。

例 1

以下の例では、1 行のテキストのみを表示します。他のテキストは切り捨てられます。 div 要素の幅として 300px を設定し、オーバーフローとして非表示にし、text-overflow 属性として省略記号を設定します。さらに、「white-space」属性と「no-wrap」値を使用して、テキストを 1 行のみで表示します。

例 2

例 2

以下の例では、N 行の切り詰められたテキストが表示されます。最初の例と同様に、div 要素にテキストを追加しました。その後、「white-space: no-wrap」CSS プロパティを使用する代わりに、「webkit-line-clamp」CSS プロパティを使用して行数を設定しました。

出力では、切り詰められたテキストが 3 行だけ表示されていることがわかります。ユーザーは行数を変更して出力を観察できます。

例 3

例 3

次の例では、テキストを N 行に切り詰めるリアルタイムの使用方法を示します。ここでは、HTML と CSS を使用してカード コンポーネントを作成しました。カードの左側に画像を追加し、右側にテキストを追加しました。さらに、カードの幅は固定されています。

テキストがはみ出さないように、カードの右側にテキストを表示する必要があります。テキストは 4 行に切り詰められ、出力に表示されます。

ユーザーはテキストを複数行に切り詰めることを学びました。 「overflow:hidden」および「text-overflow:elipsis」CSS プロパティを使用してテキストを切り詰めることができます。さらに、「white-space: no-wrap」を使用してテキストの 1 行を切り詰め、「webkit-line-clamp:lines」CSS プロパティを使用してテキストを複数行に切り詰める必要があります。

以上がCSS を使用してテキストの長さ制限を N 行に設定するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。