JavaScript menampilkan efek ellipsis setelah melebihi wadah
Dalam proyek aktual, karena ketidakpastian panjang konten teks dan perbaikan tata letak halaman, tidak dapat dihindari bahwa konten teks akan melebihi area Div (atau tag lain, sama di bawah). Cara yang lebih baik saat ini adalah dengan secara otomatis menampilkannya di ellipsis (...) ketika teks melebihi lebar div terbatas. Dengan cara ini, menurut kebiasaan, orang akan tahu bahwa ada teks di sini yang dihilangkan. Ada properti di CSS yang disebut teks-overflow: ellipsis; Misalnya, Anda dapat menulisnya seperti ini menggunakan CSS:
{width: 27em; SPACE PUTIH: Nowrap; teks-overflow: ellipsis; -o-text-overflow: ellipsis; Overflow: Tersembunyi;} Teks overflow ellipsis tidak dapat diimplementasikan di browser Firefox saja, dan teks tersebut langsung dijatuhkan dari tengah. Saya tidak berbicara tentang cara menggunakan CSS untuk mengimplementasikan ini. Implementasi CSS spesifik dapat digunakan pada Baidu. Yang paling penting di sini adalah cara mengimplementasikannya dengan JS dan cara menulis komponen sederhana melalui JS. Saya dapat secara langsung memanggil metode inisialisasi JS untuk mengimplementasikannya! Misalnya, efek berikut:
Titik -titik dan titik -titik di belakang meminta pengguna bahwa ada lebih banyak konten yang belum ditampilkan untuk menyelesaikan efek seperti itu!
Katakan lebih sedikit omong kosong dulu! Pertama, mari kita lihat efek demo yang saya buat dan Anda akan mengerti apa itu!
Jika Anda ingin melihat efeknya, silakan klik saya! OKE?
1: Mari kita lihat item konfigurasi komponen terlebih dahulu:
Target
nol, item yang diperlukan untuk wadah untuk dicegat oleh target adalah nol secara default
limitlinenumber 1, jumlah baris yang akan ditampilkan adalah 1 baris secara default
Ketik '...', ketik yang melebihi panjang wadah ditampilkan secara default ke ellipsis
LineHeight 18, tinggi garis default dari simpul DOM adalah 18
ISShowTitle True, judul diperlukan untuk menampilkan semua konten. Default itu benar
ISCHARLIMIT FALSE LIMITS UNTUK MENUNJUKKAN ellipsis berdasarkan panjang karakter
Maxlength 20 Panjang default adalah 20. Ellipsis akan ditampilkan setelah melebihi karakter 20.
Dua: Analisis
1. Pertama, mari kita bicara tentang komponen ini: mendukung dua cara untuk mencegat string. Pertama: mencegat sesuai dengan panjang karakter, dan tampilkan ellipsis setelah melebihi mereka. Misalnya, saya menyebutnya seperti ini:
multiellipsis baru ({
"TargetCls": '.text8',
"Ischarlimit": Benar,
"Maxlength": 18
});
Inisialisasi dengan cara ini berarti bahwa Ischarlimit adalah benar, yang berarti mencegat dengan jumlah karakter. Panjang maksimum maxlength adalah 18. Inisialisasi dengan cara ini, karena kode pertama -tama akan menentukan bahwa jika Ischarlimit benar, itu akan secara langsung dicegat sesuai dengan jumlah karakter, seperti kode berikut:
2. Tipe kedua dicegat berdasarkan jumlah baris dan ketinggian. Misalnya, ketinggian garis item konfigurasi default adalah 18. Jika saya ingin menampilkan 2 baris, yaitu tinggi h = 18*2. Jika ketinggian wadah adalah 100, maka metode pencegat adalah:
Gunakan (100 - Panjang Jenis - 1) Apakah itu lebih besar dari 18 × 2, jika lebih besar dari, terus mencegat, jika tidak itu tidak akan mencegat, dan efek elipsis akan ditampilkan! Kode berikut:
Kerugian: Namun, jika Anda menggunakan intersep baris tinggi, tidak apa-apa jika data relatif kecil, tetapi jika ada banyak data, seperti ketinggian 500 piksel atau lebih, itu akan relatif mempengaruhi kinerja, karena mereka harus menghitung N kali setiap kali (n berarti bahwa ada banyak fungsi yang dipanggil Loop).
Semua kode JS adalah sebagai berikut:
Salin kode
/ * * Multiellipsis berdasarkan js * @author tugenhua */ function multiellipsis (opsi) {var self = this; self.options = $ .extend ({}, default, opsi || {}); self._init (); } $ .Extend (multiellipsis.prototype, {// page initialization_init: function () {var self = this, cfg = self.options; if (cfg.targetcls == null || $ (cfg.targetcls + ") [0] == tidak definisi) {ifglsc.con) [0]; kosong! ");} return;} if (cfg.isshowtitle) {// Tambahkan atribut judul untuk mendapatkan teks elemen var title = self.getText (); $ (cfg.targetcls) .attr ({" title ": title {{}} {{{{{{{{{{{{{{{{{); } self._compareheight (cfg.lineHeight * cfg.limitlinenumber); if (text.length> cfg.maxlength) {var curtext = text.substring (0, cfg.maxlength); konten html secara langsung * @method getText {public} */ getText: function () {var self = this, cfg = self.options; ini, cfg = self.options; $ ($ (cfg.targetcls + "") [0]) ") [0]). HTML (teks); MaxLineHeight) {self._deleteText (self.getText ()); Text.substring (0, Text.Length - Typelen - 1); function () {var self = ini, cfg = self.options; var defaults = {'targetcls': null, // wadah yang akan dicegat oleh target'limitlinenumber ': 1. node'isshowtitle ': true, // apakah judul menampilkan semua konten benar secara default' ischarlimit ': false, // tampilan ellipsis dibatasi oleh panjang karakter' maxlength ': 20 // default adalah 20};Metode di atas untuk menampilkan efek ellipsis setelah JavaScript melebihi wadah (kompatibel dengan satu baris atau beberapa baris) adalah semua konten yang saya bagikan dengan Anda. Saya harap Anda dapat memberi Anda referensi dan saya harap Anda dapat mendukung wulin.com lebih lanjut.