Bagaimanakah Text Overflow Ellipsis Berfungsi dalam Firefox, dan Apakah Penyelesaiannya?

text-overflow:ellipsis dalam Firefox 4 (dan FF5): Panduan Komprehensif

Dalam dunia pembangunan web, teks- overflow:ellipsis CSS property berdiri sebagai bukti pandangan jauh Microsoft. Sifat ini membenarkan teks melimpahi sempadan elemen dan dipotong dengan penunjuk elipsis (...).

Malangnya, Firefox telah ketinggalan berbanding pelayar lain dalam sokongannya untuk text-overflow:ellipsis. Pembangun Firefox telah membahaskan isu ini selama bertahun-tahun, tetapi pelaksanaan masih sukar difahami.

Kemusnahan Hack -moz-binding

Pada suatu masa dahulu, pengguna Firefox 3 boleh menggunakan penggodaman menggunakan ciri -moz-binding untuk membolehkan sokongan elipsis. Walau bagaimanapun, penyelesaian ini menemui halangan dengan mengalih keluar -moz-binding dalam Firefox 4.

JavaScript as a Last Resort

Pembangun boleh mempertimbangkan untuk menggunakan JavaScript sebagai sandaran . jQuery menawarkan penyelesaian mudah untuk memotong teks:

var limit = 50;
var ellipsis = "...";
if( $('#limitedWidthTextBox').val().length > limit) {
    var trimmedText = $('#limitedWidthTextBox').val().substring(0, limit - 4);
    trimmedText += ellipsis;
    $('#limitedWidthTextBox').val(trimmedText);
}

Pendekatan Lebih Elegan

Untuk penyelesaian yang lebih kemas, lampirkan kelas CSS (cth. fixWidth) pada elemen dengan lebar tetap. Kemudian, gunakan JavaScript untuk mengendalikan pemotongan untuk semua elemen dengan kelas ini:

$(document).ready(function() {
    $('.fixWidth').each(function() {
        var limit = 50;
        var ellipsis = "...";
        var text = $(this).val();
        if (text.length > limit) {
            var trimmedText = text.substring(0, limit - 4);
            trimmedText += ellipsis;
            $(this).val(trimmedText);
        }
    });
});

Penebusan Firefox

Akhirnya, selepas bertahun-tahun jangkaan, Firefox Aurora telah memasukkan sokongan elipsis , membuka jalan untuk keluarannya dalam Firefox 7. Ciri yang ditunggu-tunggu ini membawa Firefox setanding dengan yang lain penyemak imbas, menawarkan pembangun penyelesaian asli untuk pemotongan elipsis.

Atas ialah kandungan terperinci Bagaimanakah Text Overflow Ellipsis Berfungsi dalam Firefox, dan Apakah Penyelesaiannya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!