Rumah >hujung hadapan web >tutorial css >Bagaimanakah Saya Boleh Mencapai Elipsis Limpahan Teks dalam Firefox Tanpa JavaScript?

Bagaimanakah Saya Boleh Mencapai Elipsis Limpahan Teks dalam Firefox Tanpa JavaScript?

Barbara Streisand
Barbara Streisandasal
2024-12-11 19:49:10122semak imbas

How Can I Achieve Text Overflow Ellipsis in Firefox Without JavaScript?

Sokongan Ellipsis dalam Firefox: A Journey and Resolution

Limpahan teks ialah sifat CSS yang penting untuk memaparkan teks terpotong dengan cekap. Walaupun banyak penyemak imbas telah melaksanakan "text-overflow: ellipsis," Firefox masih belum mengikutinya.

Selama bertahun-tahun, penggodaman menggunakan ciri -moz-binding membolehkan Firefox 3 memaparkan elipsis. Walau bagaimanapun, dengan penyingkiran ciri ini dalam Firefox 4, penggodaman menjadi usang.

Timbul persoalan: adakah terdapat penyelesaian alternatif tanpa menggunakan JavaScript?

Walaupun JavaScript menyediakan pilihan yang berdaya maju, pendekatan yang lebih diingini ialah mencari penyelesaian CSS asli. Malangnya, Firefox 5 dan keluaran terdahulu terus kekurangan sokongan.

Walau bagaimanapun, ada harapan di kaki langit. Ciri elipsis telah ditambahkan pada "Saluran Aurora" Firefox. Ini menunjukkan bahawa ia mungkin akan dikeluarkan sebagai sebahagian daripada Firefox 7, menyediakan penyelesaian yang lama ditunggu-tunggu untuk isu ini.

Sehingga keluaran rasmi, JavaScript kekal sebagai pilihan alternatif. Dengan menggunakan jQuery, seseorang boleh melaksanakan skrip ringkas:

var limit = 50;
var ellipsis = "...";
if( $('#limitedWidthTextBox').val().length > limit) {
   // -4 to include the ellipsis size and also since it is an index
   var trimmedText = $('#limitedWidthTextBox').val().substring(0, limit - 4); 
   trimmedText += ellipsis;
   $('#limitedWidthTextBox').val(trimmedText);
}

Selain itu, melampirkan kelas CSS pada elemen dengan lebar tetap membolehkan manipulasi JavaScript yang lebih mudah:

$(document).ready(function() {
   $('.fixWidth').each(function() {
      var limit = 50;
      var ellipsis = "...";
      var text = $(this).val();
      if (text.length > limit) {
         // -4 to include the ellipsis size and also since it is an index
         var trimmedText = text.substring(0, limit - 4); 
         trimmedText += ellipsis;
         $(this).val(trimmedText);
      }
   });
});//EOF

Sementara Firefox terus berkembang, permintaan untuk sokongan asli "text-overflow: ellipsis" pasti akan berkembang. Dengan kemasukannya dalam Firefox 7, ciri yang ditunggu-tunggu ini akhirnya akan memenuhi jangkaan pembangun dan pengguna.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencapai Elipsis Limpahan Teks dalam Firefox Tanpa JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn