teks css tersembunyi

Petua menyembunyikan teks CSS: Cara menggunakan inden teks dan laluan klip untuk menyembunyikan teks

Dalam reka bentuk web, kadangkala kita perlu menyembunyikan teks, tetapi kita tidak mahu menggunakan paparan: tiada; untuk menghapuskannya sepenuhnya. Pada masa ini, CSS menyediakan beberapa teknik untuk mencapai kesan penyembunyian teks, yang paling biasa digunakan ialah inden teks dan laluan klip.

1. inden teks

Atribut inden teks boleh mengalihkan teks ke kiri atau kanan Jika ditetapkan kepada nilai negatif, teks boleh disembunyikan di luar tepi elemen . Contohnya:

.hide {
    text-indent: -9999px;
}

Gaya ini akan menggerakkan teks dalam elemen di luar sebelah kirinya, mencapai kesan tersembunyi teks. Walau bagaimanapun, perlu diingatkan bahawa kaedah ini hanya terpakai pada satu baris teks dan tidak boleh mengendalikan penyembunyian berbilang baris teks.

2. Laluan klip

Atribut laluan klip menggunakan laluan keratan untuk memotong bahagian imej dan elemen yang boleh dilihat. Kita boleh menyembunyikan teks dalam elemen dari luar segi empat tepat dengan menetapkan laluan keratan kepada segi empat tepat. Contohnya:

.hide {
   clip-path: inset(0 0 0 9999px);
}

Gaya ini akan memangkas teks dalam elemen kepada 9999px di luar sebelah kiri, mencapai kesan tersembunyi teks. Berbanding dengan inden teks, kaedah laluan klip boleh mengendalikan kesan penyembunyian teks berbilang baris.

3. Perbandingan inden teks dan laluan klip

Kami boleh membandingkan inden teks dan laluan klip untuk lebih memahami kelebihan dan kekurangannya.

1. Mencapai kesan

teks-inden: Kesan tersembunyi yang sesuai untuk satu baris teks, tetapi tidak boleh mengendalikan berbilang baris teks.

laluan klip: Sesuai untuk menyembunyikan kesan teks berbilang baris Ia lebih fleksibel daripada inden teks dan boleh mengendalikan bentuk yang lebih kompleks.

2. Kesukaran pelaksanaan

text-indent: sangat mudah, cuma tetapkan nilai negatif text-indent.

laluan klip: Ia agak rumit Anda perlu mempertimbangkan kerumitan bentuk semasa menetapkan laluan keratan Ia memerlukan lebih banyak latihan dan pengalaman untuk dikuasai.

3. Keserasian

teks-inden: Keserasian sangat baik, disokong oleh hampir semua penyemak imbas.

laluan klip: Keserasian agak lemah, sesetengah penyemak imbas tidak menyokongnya dan kaedah pemprosesan keserasian perlu digunakan untuk menyelesaikannya.

Ringkasnya, inden teks sesuai untuk menyembunyikan baris teks yang ringkas, manakala laluan klip lebih fleksibel dan boleh mengendalikan bentuk yang lebih kompleks, tetapi ia memerlukan lebih banyak latihan dan pengalaman ditujukan.

4. Senario penggunaan

1. Sembunyikan teks berulang dalam elemen

Dalam reka bentuk, kadangkala kita perlu menyembunyikan sebahagian daripada teks dalam elemen (seperti sebagai tajuk berulang atau teks penerangan), tetapi kami tidak mahu menggunakan display:none untuk mengalih keluarnya sepenuhnya. Pada masa ini, menggunakan inden teks atau laluan klip boleh mencapai keperluan kita.

.title {
    text-indent: -9999px;
}

2. Mencapai kesan tuding

Kadangkala kita perlu melaksanakan kesan tuding untuk menyembunyikan teks dalam elemen dan memaparkannya hanya apabila tetikus dialihkan ke dalamnya. Menggunakan inden teks dan laluan klip, kita boleh mencapai kesan ini dengan mudah.

.btn {
    text-indent: -9999px;
}

.btn:hover {
    text-indent: 0;
}

rrree

3. Sembunyikan teks label borang

Dalam reka bentuk borang, kadangkala kita perlu menyembunyikan teks dalam label dan hanya menggunakan ruang letak untuk menggesa pengguna untuk input. Pada masa ini, menggunakan inden teks atau laluan klip boleh mencapai keperluan kita.

.btn {
    clip-path: inset(0 0 0 9999px);
}

.btn:hover {
    clip-path: unset;
}

rrree

Ringkasan

Dalam reka bentuk web, teknik inden teks dan laluan klip sangat praktikal. Kita boleh menggunakannya untuk menyembunyikan teks dalam elemen, melaksanakan kesan tuding atau menyembunyikan teks dalam label borang, dsb. Ia bukan sahaja mudah digunakan, tetapi juga mempunyai keserasian yang baik dan merupakan bahagian yang sangat diperlukan dalam kemahiran CSS.

Atas ialah kandungan terperinci teks css tersembunyi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!