Bagaimana cara menggunakan CSS untuk melaksanakan paparan dan menyembunyikan fungsi nama folder atau teks perihalan?

CSS bijak melaksanakan paparan teks folder dan bersembunyi

Bagaimana dengan anggun mengendalikan paparan teks panjang dalam senarai folder yang dihasilkan secara dinamik untuk mengelakkan mempengaruhi susun atur halaman? Artikel ini menyediakan penyelesaian berasaskan CSS untuk membolehkan nama folder atau teks deskripsi dipaparkan sepenuhnya apabila diperlukan.

Analisis keperluan

Katakan kami mempunyai senarai folder yang dihasilkan secara dinamik dengan beberapa nama folder atau teks keterangan terlalu lama. Secara lalai, hanya teks satu baris yang dipaparkan, tetapi apa yang perlu dilakukan apabila pengguna perlu melihat kandungan penuh?

Penyelesaian pelaksanaan CSS

Dengan CSS :hover Pseudo-Class dan Properties Text, kita dapat dengan mudah melaksanakan fungsi ini. Kod berikut menunjukkan pelaksanaan tertentu:

<div class="folder-item">
  <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/001/246/273/174286777590538.jpg" class="lazy" alt="Ikon folder">
  <span>Adakah ini kecantikan? Saya tidak tahu, tetapi saya dapati dari Baidu pula. Anda dapat melihat jika ia kecantikan sendiri.</span>
</div>

.folder-item {
  Lebar: 200px;
}

.folder-item img {
  paparan: blok;
  Lebar: 100%; /* Laraskan lebar imej untuk menyesuaikan diri dengan bekas*/
  Max-Height: 200px; /* Tetapkan ketinggian maksimum gambar untuk mengelakkan ketinggian berlebihan*/
  Objek-Fit: Cover; /* Menyimpan perkadaran imej dan isi bekas*/
  margin-bottom: 8px;
}

.folder-item span {
  paparan: -WebKit -box; /* Gunakan kotak flexbox atau webkit untuk melaksanakan paparan satu baris*/
  -Webkit-line-clamp: 1; /* Tunjukkan hanya satu baris*/
  -Webkit-box-orient: menegak;
  Limpahan: Tersembunyi;
}

. Pemula-item: hover span {
  paparan: blok; /* memaparkan teks penuh semasa melayang*/
  -Webkit-line-clamp: unset; /* Membatalkan had talian tunggal*/
}

Tafsiran kod

1. Gaya Asas: .folder-item mentakrifkan lebar item folder; Gaya gambar diselaraskan untuk menyesuaikan diri dengan lebar kontena, dan atribut ketinggian maksimum dan object-fit ditetapkan untuk memastikan kesan paparan imej.

2. Paparan satu baris lalai:. .folder-item span menggunakan -webkit-box (atau display: flex; ) dan -webkit-line-clamp sifat untuk menyekat teks untuk dipaparkan sebagai garisan tunggal, dan menyembunyikan kelebihan dengan overflow: hidden .

3. Kesan Hover Mouse:. .folder-item:hover span Apabila melayang, membatalkan had -webkit-line-clamp had untuk membuat teks dipaparkan sepenuhnya.

Melalui kod CSS di atas, anda dapat merealisasikan paparan elegan dan menyembunyikan fungsi folder atau teks deskripsi, tanpa mengubah struktur HTML dan menyimpan susun atur halaman yang kemas. Perhatikan bahawa harta -webkit-line-clamp adalah harta persendirian. Adalah disyorkan untuk menggunakannya bersempena dengan display: flex; atau display: -webkit-box; untuk memastikan keserasian.

Atas ialah kandungan terperinci Bagaimana cara menggunakan CSS untuk melaksanakan paparan dan menyembunyikan fungsi nama folder atau teks perihalan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!