css di luar peninggalan tersembunyi

Dalam reka bentuk web, kadangkala kita perlu memaparkan beberapa teks atau gambar yang panjang, tetapi jika kita memaparkan semuanya secara langsung, halaman akan menjadi sangat mengelirukan. Pada masa ini, kita perlu menggunakan di luar peninggalan tersembunyi dalam CSS untuk menyelesaikan masalah ini.

1. Konsep asas

Limpahan teks dalam CSS ialah teknologi yang menyembunyikan dan menghilangkan teks yang melebihi kawasan paparan dalam elemen. Teknik ini biasanya digunakan dalam pelbagai senario seperti jadual, senarai, pengepala dan menu navigasi.

Melebihi peninggalan tersembunyi dicapai terutamanya melalui tiga atribut berikut:

1 ruang putih: Tetapkan kepada nowrap untuk mengelakkan teks daripada dibalut.

2. Limpahan: Tetapkan kepada tersembunyi untuk menyembunyikan bahagian kawasan limpahan teks.

3. limpahan teks: Tetapkan kepada elipsis, yang bermaksud menggunakan tiga titik (...) dalam kawasan paparan untuk menghilangkan bahagian di luar kawasan itu.

Tiga atribut di atas perlu digunakan pada masa yang sama untuk mencapai kesan di luar penyembunyian dan peninggalan.

2. Senario Aplikasi

1. Jadual

Dalam jadual, jika kandungan teks sel tertentu terlalu panjang, ia akan menyukarkan keseluruhan jadual untuk dibaca. dan susun atur. Pada masa ini, kita boleh menggunakan teknik melampaui sembunyi-peninggalan untuk menyembunyikan kandungan teks di luar julat sel untuk mengekalkan keindahan dan kebolehbacaan jadual.

Kod sampel adalah seperti berikut:

td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

2 Senarai

Dalam senarai, jika kandungan teks item senarai terlalu panjang, ia juga akan menjejaskan. susun atur dan rupa antara muka. Gunakan teknik peninggalan di luar skop untuk menyembunyikan dan meninggalkan kandungan teks yang melebihi julat, menjadikan senarai lebih kemas.

Kod contoh adalah seperti berikut:

li {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

3. Tajuk

Dalam tajuk, jika tajuk terlalu panjang, ia juga akan menjejaskan keindahan dan reka letak. muka surat. Menggunakan teknik melampaui sembunyi-sembunyi, anda boleh menyembunyikan dan meninggalkan kandungan tajuk di luar skop, menjadikan tajuk lebih ringkas dan jelas.

Kod sampel adalah seperti berikut:

h1 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

4 Menu navigasi

Dalam menu navigasi, jika kandungan teks item tertentu terlalu panjang, ia akan menjejaskan. susun atur dan susun atur keseluruhan menu navigasi. Gunakan teknik beyond-hide-omission untuk menyembunyikan dan meninggalkan kandungan teks di luar skop, menjadikan menu navigasi lebih kemas dan lebih mudah dibaca.

Kod sampel adalah seperti berikut:

nav a {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

3 Ringkasan

Di luar teknologi peninggalan tersembunyi ialah teknologi yang sangat praktikal dalam CSS, sesuai untuk pelbagai senario, dan boleh. meningkatkan estetika dan kebolehbacaan Halaman dengan berkesan. Dalam pembangunan bahagian hadapan, teknologi ini harus digunakan dengan sewajarnya mengikut keperluan. Pada masa yang sama, kami juga perlu memberi perhatian kepada beberapa butiran, seperti tidak meninggalkan terlalu banyak teks, supaya tidak menjejaskan penghantaran maklumat dan pengalaman membaca pengguna halaman.

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