{ hide_text } Laporan ringkasan penyembunyian teks CSS

{ hide_text } Laporan ringkasan penyembunyian teks CSS

Demo penyembunyian teks CSS yang saya kompilasi baru-baru ini merangkum beberapa metode, berharap mendapatkan solusi yang paling sempurna dan memasukkannya ke dalam cuplikan kode saya sendiri, namun pada akhirnya saya terjebak dalam situasi di mana kesimpulannya berulang kali dibatalkan. Karena ada begitu banyak skenario dan elemen aplikasi yang perlu dipertimbangkan, apa pun browsernya, terminal aplikasi yang berbeda dan struktur tag yang berbeda akan memiliki solusi optimal yang berbeda. Oleh karena itu, daripada berharap lebih "malas" dalam bekerja, Lebih baik untuk mengkonsolidasikan dan mengumpulkan pengetahuan dasar seperti biasa, sehingga Anda bisa lebih berguna saat perlu melakukan trade-off.

Karena saya memiliki sedikit pengalaman, tidak dapat dipungkiri akan ada kesalahan dan kekurangan pada bagian demo. Jika Anda menemukan masalah, saya harap Anda dapat menunjukkannya.

Demo daftar metode

1. Tanpa syarat: tampilan: tidak ada

Cuplikan kode:

(x)HTML

<p class="hide_display">Saya adalah teks kecap</p>

CSS

/* Kekerasan disembunyikan*/
.hide_display{display:tidak ada;}

kesesuaian:

keuntungan:

• Nyaman dan cepat
• Kompatibilitas yang baik

kekurangan:

• Pembaca layar tidak dapat membaca
• Hyperlink tidak berlaku
• Teks alternatif gambar memerlukan latar belakang label lain
• Dampak pada peringkat pencarian
• Penggunaan yang ekstensif dapat dengan mudah dianggap sebagai kecurangan SEO

2. Pilihan kompromi: overflow:hidden/position:absolute/visibilitas:hidden

Cuplikan kode:

(x)HTML

<span class="hide_overflow">Saya adalah teks kecap nomor 1</span>
<p class="hide_position">Saya teks kecap nomor 2</p>
<p class="hide_visibility">Saya teks kecap nomor 3</p>

CSS

/* Menyembunyikan elemen dan memisahkannya dari aliran teks sehingga elemen tersebut tidak mempengaruhi elemen lainnya */
.hide_overflow{
tinggi:0 piksel;
meluap: tersembunyi;
display:block;/* Elemen sebaris diperlukan*/
float:left; /* Keluar dari alur dokumen atau position:absolute;*/
}
/* Posisikan di luar rentang yang terlihat, di luar aliran teks, sehingga elemen tidak mempengaruhi elemen lainnya*/
.sembunyikan_posisi{
posisi:mutlak;
kiri:-32767 piksel;
}
/* Prinsipnya sama dengan .hide_position*/
.hide_visibility{
visibilitas: tersembunyi;
posisi:mutlak; /* Keluar dari alur dokumen*/
margin-kiri:-32767 piksel;
}