Bagaimanakah Saya Boleh Memotong Pengepala HTML Terlalu Panjang dengan Elipsis?

Penyelesaian Elegan untuk Memotong Pengepala HTML Terlalu Luas

Dalam halaman web dinamik dengan reka letak boleh laras, adalah perkara biasa untuk menemui tajuk berita (h2) dengan panjang yang berbeza-beza. Apabila tajuk ini melebihi lebar tetingkap penyemak imbas, ia lazimnya pecah menjadi berbilang baris. Untuk mengelakkan tingkah laku yang tidak diingini ini, mari kita terokai penyelesaian yang canggih untuk memotong teks tajuk dan memasukkan elipsis (...) jika ia akan melimpah ke dalam berbilang baris.

Menggunakan kuasa CSS, kita boleh mencipta salib -penyelesaian penyemak imbas yang mencapai pemangkasan ini dengan mudah. Berikut ialah kodnya:

<code class="css">.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
}</code>

Kod ini mentakrifkan kelas CSS bernama "ellipsis" dengan sifat khusus:

• white-space: nowrap;: Mencegah teks daripada dibalut ke berbilang baris.
• limpahan: tersembunyi;: Menyembunyikan sebarang teks yang melebihi lebar elemen.
• limpahan teks: elipsis; dan -o-text-overflow: ellipsis;: Menyisipkan elipsis (...) masing-masing pada penghujung teks yang dipotong untuk kebanyakan penyemak imbas moden dan Opera.

Dengan menggunakan kelas CSS ini pada elemen h2 anda yang bermasalah, anda boleh memastikan ia akan dipotong kepada satu baris dan memaparkan elipsis jika teks melimpah. Penyelesaian ini adalah elegan dan serasi dengan semua pelayar utama kecuali Firefox 6.0. Untuk versi Firefox yang lebih awal, anda boleh merujuk kepada sumber lain yang menangani pembalut teks berbilang baris.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Memotong Pengepala HTML Terlalu Panjang dengan Elipsis?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!