Mengapa `text-overflow: ellipsis` Saya Tidak Berfungsi?

text-overflow: ellipsis Not Functioning

Dalam percubaan untuk membuat span mengecut dengan elipsis apabila tetingkap penyemak imbas dibuat sempit, kod berikut telah digunakan:

body {
    overflow: hidden;
}

span {
    border: solid 2px blue;
    white-space: nowrap;
    text-overflow: ellipsis;
}

Walau bagaimanapun, kod ini tidak menghasilkan kesan yang diingini. Untuk menyelesaikan masalah, adalah penting untuk memastikan sifat CSS berikut hadir:

• Limpahan: Sifat ini mengawal cara kandungan harus mengalir di luar bekasnya.
• Lebar (atau lebar maks): Sifat ini menentukan lebar maksimum span.
• Paparan: Sifat ini menentukan cara span perlu dipaparkan, biasanya ditetapkan kepada inline, block atau inline-block.
• White-space : Harta ini menentukan cara ruang putih dikendalikan dalam span.

Berikut ialah contoh kod yang diperbetulkan yang merangkumi sifat ini:

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

Dengan menggabungkan sifat CSS ini, span kini akan mengecut dengan elipsis apabila tetingkap menjadi sempit .

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