Mengapa 'text-overflow: ellipsis' Tidak Berfungsi pada Elemen Span Saya?

"text-overflow: ellipsis" Tidak Berfungsi

Apabila cuba menggunakan "text-overflow: ellipsis" untuk memotong teks dalam < ;span> elemen, elipsis tidak muncul apabila saiz tetingkap dikecilkan.

Penyelesaian

Untuk mendayakan kefungsian "text-overflow: ellipsis", adalah perlu untuk memasukkan berikut sifat CSS sebagai tambahan kepada "text-overflow":

• Limpahan: Memastikan kandungan elemen melebihi kawasan kandungannya dan tidak disembunyikan
• Lebar (atau lebar maksimum ): Mentakrifkan lebar maksimum elemen di mana teks akan berada terkandung
• Paparan: Menentukan jenis paparan elemen (cth., blok, blok sebaris)
• Ruang putih: Mengawal cara ruang dikendalikan dalam elemen

Contoh Kod

span {
    border: solid 2px blue;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100px;
    display: block;
    overflow: hidden
}

Penjelasan

Dalam contoh yang disediakan, elemen diberi lebar 100px dan sifat limpahan ditetapkan kepada "tersembunyi", memastikan bahawa sebarang kandungan berlebihan disembunyikan dalam sempadan elemen. Sifat paparan ditetapkan kepada "sekat" untuk memaksa elemen menduduki blok segi empat tepat ruang. Akhir sekali, sifat ruang putih ditetapkan kepada "nowrap" untuk mengelakkan pemisah baris dalam teks.

Dengan sifat ini digunakan, sifat "text-overflow: ellipsis" menjadi berfungsi, memotong teks dalam < ;span> elemen dan menambah elipsis (...) apabila saiz tetingkap dikecilkan kepada satu titik di mana teks melebihi lebar elemen.

Atas ialah kandungan terperinci Mengapa 'text-overflow: ellipsis' Tidak Berfungsi pada Elemen Span Saya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!