如何利用CSS实现文件夹名称或描述文本的显示隐藏功能？

CSSは、フォルダーのテキスト表示と隠れを巧みに実装します

ページレイアウトに影響を与えないように、動的に生成されたフォルダーリストに長いテキストの表示を優雅に処理する方法は？この記事では、必要に応じてフォルダー名または説明テキストを完全に表示できるようにするCSSベースのソリューションを提供します。

要件分析

いくつかのフォルダー名または説明テキストが長すぎる動的に生成されたフォルダーリストがあるとします。デフォルトでは、シングルラインテキストのみが表示されますが、ユーザーが完全なコンテンツを表示する必要がある場合はどうすればよいですか？

CSS実装ソリューション

CSS :hover Pseudoクラスとテキストプロパティを使用すると、この機能を簡単に実装できます。次のコードは、特定の実装を示しています。

<div class="folder-item">
  <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/001/246/273/174286777590538.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="如何利用CSS实现文件夹名称或描述文本的显示隐藏功能？">
  <span>これは美しさですか？わかりませんが、とにかくBaiduから見つけました。あなた自身が美しさであるかどうかを確認できます。</span>
</div>

.folder-item {
  幅：200px;
}

.folder-item img {
  表示：ブロック;
  幅：100％; /*コンテナに適応するために画像幅を調整します*/
  Max-Height：200px; /*過度の高さを防ぐために、画像の最大高さを設定します*/
  オブジェクトフィット：カバー; /*画像の割合を保持し、コンテナを埋めます*/
  マージンボトム：8px;
}

.Folder-Itemスパン{
  ディスプレイ：-WebKit -Box; /* FlexBoxまたはWebKit-Boxを使用して、シングルラインディスプレイを実装します*/
  -webkit-line-clamp：1; /* 1つの行のみを表示*/
  -webkit-box-orient：垂直;
  オーバーフロー：隠し;
}

.Folder-Item：ホバースパン{
  表示：ブロック; /*ホバリング時に全文を表示*/
  -webkit-line-clamp：unset; /*シングルラインの制限をキャンセル*/
}

コード解釈

1. 基本スタイル： .folder-itemフォルダーアイテムの幅を定義します。画像スタイルは、コンテナの幅に適応するように調整されており、最大高さとobject-fit属性が設定され、画像表示効果が確実になります。

2. デフォルトのシングルラインディスプレイ： .folder-item span -webkit-box （またはdisplay: flex; ）および-webkit-line-clampプロパティを使用して、単一の行として表示するテキストを制限し、 overflow: hiddenで過剰を隠します。

3. マウスホバー効果： .folder-item:hover span 、 -webkit-line-clamp制限をキャンセルして、テキストを完全に表示します。

上記のCSSコードを使用して、HTML構造を変更し、ページレイアウトをきれいに保つことなく、フォルダー名または説明テキストのエレガントな表示と非表示の機能を実現できます。 -webkit-line-clampプロパティは私有地であることに注意してください。 display: flex;に合わせて使用​​することをお勧めします。またはdisplay: -webkit-box;互換性を確保するため。

以上が如何利用CSS实现文件夹名称或描述文本的显示隐藏功能？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。