プライマー CSS がカスタムの最大幅を切り捨てる

Web 開発プロジェクトでは、顧客のニーズ、全体的な外観、限られたリソースなどのさまざまな理由により、開発者は指定されたスペースにテキストを表示する必要がある状況に遭遇します。 truncate 属性は、この問題を解決できる CSS の効果的な機能です。

これにより、開発者は 1 行のテキストを表示したり、あふれたテキストを省略記号で切り詰めたりすることができます。ただし、状況によっては、切り詰められるテキストの最大幅をカスタマイズする必要がある場合があります。この記事では、GitHub Design Systems によって設計された人気のオープンソース CSS フレームワークである Primer CSS を使用して最大幅をカスタマイズする方法について説明します。

切り捨てとはどういう意味ですか?

Web デザインでは、truncate は CSS text-overflow プロパティの値の 1 つです。テキストを扱うとき、コンテナがテキストを入れるのに十分な大きさではないという状況によく遭遇します。この種のテキストはオーバーフロー テキストと呼ばれます。これにより、テキスト行を表示し、残りを省略記号で切り捨てることができます。

CSS で "truncate" を使用するには、 次の手順を実行する必要があります -

• 「空白」 属性を nowrap

に設定します

• overflow プロパティを hide

に設定します。

• text-overflow プロパティを ellipsis

に設定します。

＃＃＃例＃＃＃ リーリー

非常に多くのコード行を避けるために、代わりに Primer CSS を使用できます。 Primer CSS には短縮コンポーネントが組み込まれています。同じ事前定義クラスがあります。

Primer CSS でクラスを使用する前に、npm -

からクラスをインストールする必要があります。 リーリー

または、HTML コードで CDN リンクを使用します -

リーリー

切り詰められたテキストの最大幅をカスタマイズする

切り捨てられたテキストの最大幅をカスタマイズするために、Primer CSS は、Web サイトであふれたテキストを切り捨てるための事前定義されたクラスを提供します。

＃＃＃例＃＃＃

この例では、事前定義されたボックス クラスを使用して、div 要素をサイズ変更可能なボックスに変換します。ここで、

p-1

は、ボックスのすべての辺に 4 ピクセル (0.25 レム) のパディングを追加するクラスの省略表現です。

次に、希望のスタイルをボックスに追加するために使用される style 属性があります。 resize プロパティの値を

horizo​​ntal

に設定して、ユーザーが右隅からボックスをドラッグするだけでボックスのサイズを水平方向に変更できるようにします。要素に水平スクロールバーを追加するには、 "overflow:scroll" 属性を使用します。水平スクロール バーを使用すると、テキストを水平にスクロールするときに非表示のコンテンツを表示できるようになります。 次に、Primer CSS の事前定義クラスを使用して、最大幅が異なるさまざまな切り詰められたテキストを表示します。 リーリー ＃＃＃結論は＃＃＃ コンテンツがオーバーフローする場合に備えて、表示されるテキストの最大幅をカスタマイズすることは良い習慣であり、開発者が Web サイト上の限られたスペース内でのテキストの表示を制御するのに役立ちます。この記事で説明した方法に従うことで、視覚的に魅力的な Web サイトを作成できるようになります。カードのデザインで切り捨て方法を使用することもできます。これにより、長いタイトル、見出し、カードの説明などを表示する必要がある場合でも、コンテンツがより読みやすくユーザーフレンドリーになります。

以上がプライマー CSS がカスタムの最大幅を切り捨てるの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。