入門 CSS ホバーまたはフォーカスで展開を切り詰める

テキスト表示は Web デザインにおける重要な要素であり、Web サイトのユーザー エクスペリエンスと読みやすさに影響します。テキストが正しく整理されて表示されていれば、ユーザーは簡単に理解できるため、Web サイトに引き付けられます。ただし、場合によっては、テキストが Web ページ上の指定されたスペースに対して長すぎる場合があります。このテキストを正しく表示するには、truncate メソッドを使用します。 Primer CSS は、テキストを切り詰めるだけでなく、ホバー効果やフォーカス効果を使用してテキストを拡張できるこのメソッドを提供します。この記事では、これがどのように機能するか、およびこれを可能にするクラスについて説明します。

CSS 入門

Primer CSS は、開発者が Web アプリケーションや Web サイト向けに一貫したプロフェッショナルなフロントエンドを作成できるようにする強力なオープンソース CSS フレームワークです。 GitHub Design System によって設計されています。タイポグラフィ、ボタン、アラート、切り捨て、メニュー、ナビゲーションなど、使いやすく時間を大幅に節約できる、多彩な組み込みコンポーネントのセットを提供します。さらに、初心者がいつでも始められるように詳細なドキュメントが提供されています。 Web ページ内のあふれたテキストを切り詰めるための事前定義されたクラスがあります。

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

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

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

リーリー

ホバー時またはフォーカス状態で展開を切り詰める

ホバーまたはフォーカス状態で切り詰められたテキストを展開するために、Primer CSS には組み込みクラスがあります。これらのクラスは次のとおりです -

• Truncate-text - テキストを切り捨てるために使用されます

• Truncate-text--expandable - ホバーまたはフォーカス時に切り詰められたテキストを展開するために使用されます。

＃＃＃例＃＃＃

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

p-1

は、ボックスのすべての辺に 4 ピクセル (0.25 レム) のパディングを追加するクラスの省略表現です。 次に、希望のスタイルをボックスに追加するために使用される style 属性があります。

resize

プロパティの値を horizo​​ntal に設定して、ユーザーが右隅からボックスをドラッグするだけでボックスのサイズを水平方向に変更できるようにします。要素に水平スクロールバーを追加するには、 "overflow:scroll" 属性を使用します。水平スクロール バーを使用すると、テキストを水平にスクロールするときに非表示のコンテンツを表示できるようになります。 次に、ボックス内に収まるように切り詰められるアンカー タグを含む要素を作成します。

Truncate-text

は、アンカー タグ内のテキストを切り詰めるために定義されたクラスです。一方、Truncate-text--expandable クラスは、ユーザーがカーソルを置くたびにテキストを切り詰められるようにするために組み込まれています。または フォーカスすると、切り詰められたテキストが拡大されます。 リーリー ＃＃＃例＃＃＃ この例では、div 要素内にホバーまたはフォーカス時に展開される切り詰められたテキストを追加しました。

リーリー ＃＃＃結論は＃＃＃

この記事では、スペースが限られている場合に、視覚的に魅力的な方法でテキストを適切に表示する方法を学びました。 Primer CSS を使用して簡単に実行できる切り詰め方法を使用します。さらに、展開可能な切り詰められたテキストを作成すると、ユーザーは Web サイト全体の外観に影響を与えることなく、必要なときに情報にアクセスできるようになります。これにより、ウェブサイトがユーザーフレンドリーでプロフェッショナルなものになります。

以上が入門 CSS ホバーまたはフォーカスで展開を切り詰めるの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。