Bagaimanakah Saya Boleh Mencapai Pemangkasan Teks CSS Serasi Penyemak Imbas dengan Elips?

Memotong Rentetan Panjang dengan CSS: Pengembaraan Khusus Penyemak Imbas

Walaupun memangkas bahagian pelayan teks berdasarkan lebar logik mungkin memadai, ia selalunya menghasilkan hasil yang tidak optimum disebabkan oleh lebar aksara individu yang berbeza-beza. Sebaik-baiknya, pemotongan harus berlaku dalam penyemak imbas, di mana lebar fizikal teks yang diberikan boleh ditentukan dengan tepat.

Limpahan teks Internet Explorer: sifat elipsis mencapai matlamat ini dengan tepat, tetapi keserasian merentas penyemak imbasnya adalah terhad. Firefox kekurangan sokongan untuk hartanah ini, menyebabkan pembangun mencari penyelesaian alternatif.

Pendekatan Silang Penyemak Imbas Justin Maxwell

Justin Maxwell menawarkan penyelesaian berasaskan CSS yang menyokong silang- pemangkasan pelayar. Walau bagaimanapun, ia disertakan dengan kaveat menghalang pemilihan teks dalam Firefox.

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

Kandungan ellipsis.xml

<?xml version="1.0"?>
<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>

Mengemas kini Kandungan Nod dalam Firefox

Untuk menangani had dengan pengendalian teknik ini oleh Firefox, kod berikut boleh digunakan untuk mengemas kini kandungan nod:

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

        pnode.replaceChild(newNode, node);
    }
}

Dengan teknik ini, pembangun boleh memotong rentetan panjang dengan CSS dengan berkesan, memastikan kandungan dinamik sesuai dalam reka letak lebar tetap sambil mengekalkan isyarat visual mesra pengguna seperti elips untuk menunjukkan pemotongan.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencapai Pemangkasan Teks CSS Serasi Penyemak Imbas dengan Elips?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!