Bolehkah CSS Memotong Rentetan Panjang dan Memaparkan Elipsis dengan Boleh Dipercayai?

Bolehkah CSS Memotong Rentetan Panjang?

Adakah mungkin untuk memotong teks menggunakan HTML dan CSS sahaja, membolehkan kandungan dinamik dimuatkan dalam pratakrif reka bentuk lebar tetap dan ketinggian tetap?

Secara sejarah, pemangkasan teks telah dilakukan bahagian pelayan berdasarkan anggaran bilangan aksara. Walau bagaimanapun, pendekatan ini tidak boleh dipercayai kerana lebar aksara yang berbeza-beza. Untuk menangani isu ini, penyelesaian berasaskan penyemak imbas telah dicari yang boleh menentukan lebar sebenar teks yang diberikan.

Pada mulanya, limpahan teks IE: sifat elipsis dikenal pasti sebagai penyelesaian yang berpotensi. Walau bagaimanapun, ciri ini tidak disokong oleh penyemak imbas lain, terutamanya Firefox.

Pelbagai penyelesaian berasaskan CSS muncul, menggunakan teknik seperti limpahan: tersembunyi. Walau bagaimanapun, kaedah ini sama ada gagal memaparkan penunjuk elipsis atau memaparkannya walaupun teks tidak dipotong.

Sebagai penyelesaian yang berpotensi, Justin Maxwell mencadangkan teknik CSS silang pelayar yang melibatkan penggunaan elipsis.xml tersembunyi fail. Kaedah ini secara berkesan memotong teks menggunakan elipsis, tetapi ia mempunyai kelemahan untuk menghalang pemilihan teks dalam Firefox.

Penyelesaian Kemas Kini

Dengan keluaran Firefox 7 pada tahun 2011 , sokongan untuk limpahan teks: sifat elipsis menjadi meluas, menghapuskan keperluan untuk penyelesaian. Sifat ini membenarkan pemangkasan teks yang tepat dengan penunjuk elipsis.

Selain itu, teknik telah dibangunkan untuk mengemas kini kandungan nod terpenggal sambil mengekalkan sokongan dalam Firefox. Ini melibatkan penggunaan fungsi replaceEllipsis untuk mengklon dan menggantikan nod apabila kandungannya diubah.

Atas ialah kandungan terperinci Bolehkah CSS Memotong Rentetan Panjang dan Memaparkan Elipsis dengan Boleh Dipercayai?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!