Mengapa 'text-overflow: ellipsis' saya tidak berfungsi?

Menyelesaikan masalah "text-overflow: ellipsis" Isu

Penggunaan "text-overflow: ellipsis" bertujuan untuk memotong teks dalam elemen , memaparkan "..." apabila teks mencapai had yang ditentukan. Walau bagaimanapun, dalam beberapa keadaan, fungsi ini mungkin tidak berfungsi seperti yang diharapkan.

Dalam contoh yang diberikan, nampaknya "text-overflow: ellipsis" tidak mempunyai kesan yang diingini. Untuk menyelesaikan isu ini, pastikan gaya yang berkaitan telah digunakan dengan betul. Sebagai tambahan kepada "text-overflow: ellipsis," CSS harus mengandungi sifat berikut:

1. Limpahan:

overflow: hidden;

2. Lebar atau Lebar Maks:

width: [desired width];
max-width: [maximum width];

3. Paparan:

display: block;

4. Ruang Putih:

white-space: nowrap;

Coretan CSS komprehensif yang menggabungkan semua sifat ini disediakan di bawah:

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

Dengan menggunakan gaya ini, elemen "span" akan mengecil lebar apabila tetingkap semakin kecil, mengakibatkan pemangkasan teks dengan elipsis. Berikut ialah contoh untuk menggambarkan cara ia berfungsi:

HTML:

<span>Test test test test test test</span>

Atas ialah kandungan terperinci Mengapa 'text-overflow: ellipsis' saya tidak berfungsi?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!