Bagaimanakah Saya Boleh Memotong Rentetan Panjang dengan CSS dan Memaparkan Elipsis Merentasi Pelayar?

Memenggal Rentetan Panjang dengan CSS: Penyelesaian Silang Penyemak Imbas

Memenggal teks dinamik untuk dimuatkan dalam reka letak tetap boleh menjadi satu cabaran. Tiada sifat CSS asli menyediakan sokongan silang penyemak imbas untuk memotong teks dan memaparkan elipsis. Walau bagaimanapun, penyelesaian kreatif boleh mencapai fungsi ini.

Teknik Ellipsis Justin Maxwell

Justin Maxwell membangunkan penyelesaian CSS yang berfungsi merentas penyemak imbas, tetapi ia mempunyai satu had: ia tidak tidak membenarkan 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');
}

Fail ellipsis.xml mengandungi penanda XBL yang melaksanakan fungsi elipsis.

Mengemas kini Kandungan Nod

Dalam Firefox, mengemas kini kandungan nod menggunakan innerHTML boleh memecahkan kefungsian elipsis. Untuk menangani perkara ini, gunakan kod berikut:

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

        pnode.replaceChild(newNode, node);
    }
}

Nota: Text-overflow: elipsis kini disokong secara asli dalam Firefox 7. Kemas kini ini merupakan peningkatan yang dialu-alukan, tetapi cross- penyelesaian CSS penyemak imbas kekal sebagai rujukan berguna untuk penyemak imbas lama.

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