Rumah > hujung hadapan web > tutorial css > Mengapa 'text-overflow: ellipsis' saya tidak berfungsi?

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

Barbara Streisand
Lepaskan: 2024-11-10 03:47:02
asal
256 orang telah melayarinya

Why isn't my

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;
Salin selepas log masuk

2. Lebar atau Lebar Maks:

width: [desired width];
max-width: [maximum width];
Salin selepas log masuk

3. Paparan:

display: block;
Salin selepas log masuk

4. Ruang Putih:

white-space: nowrap;
Salin selepas log masuk

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
}
Salin selepas log masuk

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>
Salin selepas log masuk

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

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan