fon css melebihi ketinggalan

Dalam pembangunan web, kandungan teks selalunya melebihi skop bekas, yang bukan sahaja menjejaskan keindahan halaman, tetapi juga mengurangkan pengalaman membaca pengguna. Sebagai tindak balas kepada situasi ini, CSS menyediakan penyelesaian untuk mencapai kesan fon melebihi ketinggalan.

1. Prinsip asas elips berlebihan CSS

Elipsis lebihan fon bermaksud apabila kandungan teks dalam elemen melebihi ruang yang diperuntukkan oleh elemen, bahagian lebihan ditandakan dengan elipsis (. .) bermakna untuk memaparkan kandungan teks dengan lebih baik, limpahan teks CSS dicapai melalui tiga atribut berikut:

• limpahan teks: digunakan untuk mengawal cara teks dipaparkan selepas ia melebihi lebar daripada elemen.
• ruang putih: digunakan untuk mengawal pemisah baris dan ruang dalam teks;
• Antaranya, atribut limpahan teks mengandungi nilai berikut:

klip: nilai atribut lalai, kandungan berlebihan akan disembunyikan; > elipsis: Melebihi kandungan memaparkan elipsis (...).

• 2. Kaedah pelaksanaan khusus fon CSS melebihi ketinggalan

Teks baris tunggal melebihi ketinggalan

Untuk teks baris tunggal, kita boleh menggunakan kaedah berikut Untuk mencapai kesan fon melebihi elipsis:

1. .overflow-text {
     white-space: nowrap; /* 禁止换行 */
     text-overflow: ellipsis; /* 超出省略 */
     overflow: hidden; /* 溢出隐藏 */
   }

Dengan kod di atas, kita boleh menyembunyikan kandungan teks yang melebihi lebar bekas dan menggantikannya dengan elips.

Teks berbilang baris melebihi peninggalan

Untuk teks berbilang baris, kandungan teks perlu dibalut dahulu, dan kemudian operasi peninggalan dilakukan. Kod pelaksanaan khusus adalah seperti berikut:

2. .overflow-text {
     display: -webkit-box;
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 3; /* 控制显示行数 */
     overflow: hidden; /* 溢出隐藏 */
     text-overflow: ellipsis; /* 超出省略 */
   }

Antaranya, -webkit-box-orient digunakan untuk memilih arah pembalut teks, -webkit-line-clamp digunakan untuk mengawal bilangan baris teks paparan, dan akhirnya kandungan yang melebihi lebar bekas ialah Sembunyikan dan gantikan dengan elips.

3. Isu keserasian peninggalan limpahan fon CSS

Perlu diambil perhatian bahawa atribut limpahan teks mungkin tidak dikenali dalam sesetengah penyemak imbas, jadi ia perlu diberi awalan untuk pemprosesan keserasian .

.overflow-text {
  white-space: nowrap;
  overflow: hidden;
  /* 兼容WebKit内核浏览器 */
  text-overflow: -webkit-ellipsis;
  /* 兼容非WebKit内核浏览器 */
  text-overflow: ellipsis;
}

4. Ringkasan

Melalui kaedah di atas, kita boleh mencapai kesan peninggalan teks di luar skop bekas, dan menjadikan halaman lebih cantik dan mudah dibaca. Dalam pembangunan sebenar, kita perlu melaraskan nilai tertentu untuk mencapai hasil yang terbaik, dan mempertimbangkan isu keserasian untuk memastikan paparan yang betul dalam pelbagai pelayar.

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