Cara menggunakan css untuk mencapai kesan melebihi elipsis paparan

Melebihi elipsis dalam CSS merujuk kepada cara untuk memaparkan kandungan teks dalam bentuk elips melalui tetapan sifat CSS apabila teks dalam elemen melebihi lebar atau ketinggian bekasnya.

Dalam keadaan biasa, apabila teks melimpah, penyemak imbas akan secara automatik mengalihkan teks ke baris seterusnya untuk paparan. Tetapi dalam beberapa kes, terutamanya dalam reka bentuk mudah alih atau responsif, kami mahu memaparkan kandungan teks dalam satu baris dan memaparkannya dalam bentuk elipsis apabila teks melebihi lebar bekas.

Atribut peninggalan yang melebihi dalam CSS boleh membantu kami mencapai kesan ini. Berikut ialah dua atribut terlalu ditinggalkan yang biasa digunakan dalam CSS: limpahan teks dan ruang putih.

1. text-overflow

text-overflow ialah atribut baharu dalam CSS3, yang digunakan untuk menetapkan cara mengendalikan apabila teks melimpahi bekas. Atribut ini mempunyai nilai berikut:

• klip: Teks dipotong terus selepas ia melimpahi bekas.
• ellipsis: Teks dipaparkan dalam bentuk elipsis selepas melimpahi bekas.
• rentetan: Gunakan rentetan yang ditentukan untuk menggantikan elipsis lalai apabila teks melimpah ke bekas.

Apabila menggunakan text-overflow, anda biasanya perlu menetapkan overflow:hidden dan white-space:nowrap untuk mengehadkan kandungan untuk dipaparkan dalam satu baris, seperti yang ditunjukkan dalam kod berikut:

div {
    width: 200px;
    height: 30px;
    background-color: #f3f3f3;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

2. ruang putih

Atribut ruang putih digunakan untuk menetapkan cara mengendalikan aksara ruang putih (seperti ruang, pengembalian pengangkutan, dll.) dalam elemen. Atribut ini mempunyai nilai berikut:

• normal: Nilai lalai Apabila terdapat berbilang aksara ruang kosong berturut-turut dalam elemen, hanya satu ruang dipaparkan.
• nowrap: Tidak membenarkan teks dibalut, memaksa teks dipaparkan pada baris yang sama.
• pra: Simpan aksara ruang kosong dan teks akan dipaparkan sama seperti fail sumber.
• pra-bungkus: Kekalkan ruang putih dan benarkan teks dibalut.
• pra-baris: Gabungkan berbilang aksara ruang putih berturut-turut, membenarkan teks dibalut.

Apabila menggunakan atribut ruang putih untuk mencapai peninggalan limpahan, anda perlu menetapkan nilai ruang putih kepada nowrap dan nilai limpahan kepada tersembunyi, seperti yang ditunjukkan dalam kod berikut:

div {
    width: 200px; 
    height: 30px; 
    background-color: #f3f3f3; 
    text-overflow: ellipsis; 
    overflow: hidden; 
    white-space: nowrap; 
}

Perlu diingat bahawa menggunakan atribut ruang putih akan menjejaskan paparan teks dalam keseluruhan elemen, jadi ia perlu digunakan bersama dengan atribut limpahan teks.

Ringkasan

Menggunakan atribut text-overflow dan white-space dalam CSS boleh memudahkan kami mencapai terlalu banyak peninggalan teks dalam beberapa kes khas. Sudah tentu, apabila menggunakannya pada projek sebenar, sila buat pelarasan berdasarkan keadaan sebenar.

Atas ialah kandungan terperinci Cara menggunakan css untuk mencapai kesan melebihi elipsis paparan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!