Mengapa Ellipsis Limpahan Teks Saya Tidak Berfungsi?

Elipsis Limpahan Teks Tidak Berfungsi

Sifat limpahan teks bertujuan untuk memotong teks yang dipaparkan dan menambah elipsis (...) untuk menunjukkan bahawa teks penuh tidak kelihatan. Walau bagaimanapun, jika sifat ini tidak berfungsi seperti yang diharapkan, adalah penting untuk memastikan bahawa beberapa sifat CSS utama disediakan.

Sifat CSS yang Diperlukan:

Untuk mengaktifkan dengan betul limpahan teks: kesan elipsis, anda mesti mempunyai sifat CSS berikut yang ditakrifkan:

• Paparan: Tetapkan sifat paparan kepada "sekat" atau "sekat sebaris" untuk memastikan teks menempati ruang pada skrin.
• White-Space: Gunakan white-space: nowrap untuk mengelakkan teks daripada dibalut pada berbilang baris.
• Limpahan: Tetapkan limpahan kepada "tersembunyi" untuk menyembunyikan mana-mana bahagian teks yang melebihi lebar bekasnya.
• Lebar (atau Lebar Maks): Tentukan lebar tetap (atau lebar maksimum ) untuk mengekang ruang yang tersedia untuk teks.

Demo dengan Kod Betul:

Coretan CSS berikut menunjukkan cara menggunakan sifat yang diperlukan dengan betul:

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

Contoh:

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

Dengan melaksanakan sifat ini, anda boleh memastikan bahawa teks yang ditentukan akan dipotong dan memaparkan elipsis apabila lebar bekasnya terlalu sempit untuk menampung keseluruhan teks.

Atas ialah kandungan terperinci Mengapa Ellipsis Limpahan Teks Saya Tidak Berfungsi?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!