Bagaimanakah Saya Boleh Mencegah Limpahan Teks dalam Tag HTML Menggunakan CSS?

Tambahkan Elipsis pada Teg HTML untuk Menghalang Limpahan Teks

Mengekalkan reka letak yang bersih dalam halaman web dinamik boleh menjadi mencabar, terutamanya apabila kandungan berubah-ubah panjangnya. Jika tajuk (h2) dalam susun atur elastik melebihi lebar tetingkap penyemak imbas, ia mungkin membalut ke dalam berbilang baris, mewujudkan penampilan yang tidak diingini.

Syukurlah, melaksanakan penyelesaian yang elegan untuk memotong tajuk berita dan menambah penunjuk elipsis ( ...) adalah sangat mudah dengan CSS sahaja. Penyelesaian silang penyemak imbas ini berfungsi dengan lancar pada semua penyemak imbas moden, kecuali Firefox 6.0.

Dengan menggunakan gaya CSS berikut pada teg tajuk, anda boleh memastikan bahawa teks dipaparkan pada satu baris dan dipotong dengan elipsis jika perlu:

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

Gabungan sifat ini memaksa teks kekal pada satu baris tanpa pembalut, menyembunyikan sebarang limpahan melebihi lebar yang tersedia dan menambah aksara elipsis untuk menunjukkan pemotongan.

Untuk sokongan menyeluruh, termasuk pembalut teks berbilang baris dan keserasian dengan versi Firefox yang lebih lama, pertimbangkan untuk melaksanakan penyelesaian JavaScript.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencegah Limpahan Teks dalam Tag HTML Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!