Bagaimana untuk Memotong Tajuk HTML Panjang dengan Elipsis Menggunakan CSS?

Memasukkan Elipsis ke dalam Teg HTML untuk Kandungan Luas

Reka bentuk web moden menggunakan reka letak anjal yang menyesuaikan diri dengan saiz tetingkap penyemak imbas yang berbeza-beza. Fleksibiliti ini menimbulkan cabaran untuk elemen dengan panjang berubah-ubah, seperti tajuk berita. Dalam senario di mana tajuk menjadi lebih lebar daripada tetingkap, mereka mungkin membalut pada berbilang baris, menjejaskan reka letak yang diingini.

Untuk menangani isu ini dengan elegan, mari kita terokai penyelesaian yang memanfaatkan CSS untuk memotong tajuk pada satu baris dan tambahkan elipsis (...) jika kandungan melebihi lebar yang tersedia.

Penyelesaian Berasaskan CSS

Penyelesaian berasaskan CSS berikut berkesan dalam penyemak imbas moden , kerana ia memanfaatkan sifat limpahan teks:

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

Penggunaan

Untuk menggunakan penyelesaian ini, cuma tambah kelas elipsis pada tajuk:

<code class="html"><h2 class="ellipsis">This is a potentially long headline</h2></code>

Keserasian Pelayar

Penyelesaian CSS sahaja ini berfungsi merentas semua penyemak imbas moden utama, kecuali Firefox 6.0. Untuk Firefox 6.0 atau lebih awal, pertimbangkan untuk menyokong pembalut berbilang baris seperti yang digariskan dalam penyelesaian alternatif ini.

Atas ialah kandungan terperinci Bagaimana untuk Memotong Tajuk HTML Panjang dengan Elipsis Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!