Bagaimanakah Saya Boleh Memotong Rentetan Panjang dengan Cekap dengan CSS dan Mengendalikan Keserasian Merentas Pelayar?

Memotong Rentetan Panjang dengan CSS: Kecemerlangan Dicapai

Memotong teks dengan HTML dan CSS boleh menjadi satu teka-teki, terutamanya apabila bergelut dengan persembahannya dalam susun atur tetap. Pemangkasan sisi pelayan berdasarkan lebar logik mempunyai hadnya dan selalunya memerlukan pelarasan berterusan untuk memastikan hasil yang optimum.

Walau bagaimanapun, kemunculan limpahan teks CSS: elipsis telah merevolusikan proses ini. Sifat ini, kini disokong oleh penyemak imbas utama, memotong teks yang melimpah dan menambahkan elips untuk menunjukkan pemotongan.

Justin Maxwell telah mencipta penyelesaian CSS merentas penyemak imbas yang memanfaatkan sifat yang disebutkan di atas. Walaupun ia menghalang pemilihan teks dalam Firefox, ia secara berkesan memangkas kandungan dan memaparkan elips seperti yang dikehendaki.

Pelaksanaan CSS:

.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    -moz-binding: url('assets/xml/ellipsis.xml#ellipsis');
}

Pengikatan XML untuk Sokongan Firefox :

<bindings xmlns="http://www.mozilla.org/xbl" xmlns:xbl="http://www.mozilla.org/xbl" xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
    <binding></binding></bindings>

Kemas Kini Kandungan Nod dalam Firefox:

Mengemas kini kandungan nod yang menggunakan elipsis dalam Firefox memerlukan pendekatan yang berbeza:

function replaceEllipsis(node, content) {
    node.innerHTML = content;
    if (YAHOO.env.ua.gecko) {
        var pnode = node.parentNode,
            newNode = node.cloneNode(true);
        pnode.replaceChild(newNode, node);
    }
}

Dengan penyelesaian yang dipertingkatkan ini, memotong teks dinamik dalam reka letak tetap bukan lagi tugas yang menakutkan . Limpahan teks: elipsis telah membuka jalan untuk pembentangan kandungan yang diperkemas, menghapuskan keperluan untuk ramalan sebelah pelayan dan memastikan keserasian merentas penyemak imbas.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Memotong Rentetan Panjang dengan Cekap dengan CSS dan Mengendalikan Keserasian Merentas Pelayar?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!