Adakah yang punya solusi / pustaka yang lebih canggih untuk memotong string dengan JavaScript dan meletakkan elipsis di bagian akhir, daripada yang jelas:
if (string.length > 25) {
string = string.substring(0, 24) + "...";
}
javascript
string
truncation
naltatis
sumber
sumber
Jawaban:
Intinya, Anda memeriksa panjang string yang diberikan. Jika lebih panjang dari panjang yang diberikan
n
, klip panjangnyan
(substr
atauslice
) dan tambahkan entitas html…
(...) ke string yang terpotong.Metode seperti itu terlihat seperti
Jika dengan 'lebih canggih' yang Anda maksud memotong pada batas kata terakhir dari string maka Anda perlu pemeriksaan tambahan. Pertama, Anda klip string ke panjang yang diinginkan, selanjutnya Anda klip hasilnya ke batas kata terakhir
Anda dapat memperluas
String
prototipe asli dengan fungsi Anda. Dalam hal inistr
parameter harus dihapus danstr
dalam fungsi harus diganti denganthis
:Lebih banyak pengembang dogmatis mungkin akan sangat mendukung Anda (" Jangan memodifikasi objek yang tidak Anda miliki ". Namun saya tidak keberatan).
Pendekatan tanpa memperluas
String
prototipe adalah dengan membuat objek pembantu Anda sendiri, berisi string (panjang) yang Anda berikan dan metode sebelumnya untuk memotongnya. Itulah yang dilakukan cuplikan di bawah.Tampilkan cuplikan kode
Akhirnya, Anda dapat menggunakan css hanya untuk memotong string panjang di node HTML. Ini memberi Anda lebih sedikit kontrol, tetapi mungkin solusi yang layak.
Tampilkan cuplikan kode
sumber
substr
adalah panjang sehingga harussubstr(0,n)
membatasi ken
karakter pertama .…
dengan ellipsis aktual (...
) pada contoh kode Anda. Jika Anda mencoba menggunakan ini untuk berinteraksi dengan API, Anda akan menginginkan entitas non-HTML di sana.Perhatikan bahwa ini hanya perlu dilakukan untuk Firefox.Semua browser
lainmendukung solusi CSS (lihat tabel dukungan ):Ironisnya adalah saya mendapatkan potongan kode dari Mozilla MDC.
sumber
white-space: nowrap;
). Ketika datang ke lebih dari satu baris Anda terjebak dengan JavaScript.Your picture ('some very long picture filename truncated...') has been uploaded.
Ada alasan yang sah bahwa orang mungkin ingin melakukan ini dalam JavaScript alih-alih CSS.
Untuk memotong hingga 8 karakter (termasuk elipsis) dalam JavaScript:
atau
sumber
.replace(/^(.{7}).{2,}/, "$1…");
bukanlong
danshort
dicadangkan sebagai kata kunci di masa mendatang dengan spesifikasi ECMAScript yang lebih lama (ECMAScript 1 hingga 3). Lihat MDN: Kata kunci yang disimpan di masa mendatang dalam standar yang lebih lamaGunakan kedua tempat pemotongan itu
atau garis bawah . tringate .
sumber
Entah bagaimana kode di atas tidak berfungsi untuk beberapa jenis teks yang disalin atau disalin dalam aplikasi vuejs. Jadi saya menggunakan trashate lodash dan sekarang berfungsi dengan baik.
sumber
Inilah solusi saya, yang memiliki beberapa peningkatan dibandingkan saran lainnya:
Itu:
sumber
Fungsi terbaik yang saya temukan. Kredit untuk elipsis teks .
Contoh :
sumber
Semua browser modern sekarang mendukung solusi CSS sederhana untuk secara otomatis menambahkan elipsis jika satu baris teks melebihi lebar yang tersedia:
(Perhatikan bahwa ini membutuhkan lebar elemen untuk dibatasi dalam beberapa cara agar memiliki efek apa pun.)
Berdasarkan https://css-tricks.com/snippets/css/truncate-string-with-ellipsis/ .
Perlu dicatat bahwa pendekatan ini tidak membatasi berdasarkan jumlah karakter. Ini juga tidak berfungsi jika Anda perlu mengizinkan beberapa baris teks.
sumber
text-direction: rtl
dantext-align: left
. Lihat davidwalsh.name/css-ellipsis-leftSebagian besar kerangka kerja Javascript modern ( JQuery , Prototype , dll ...) memiliki fungsi utilitas yang ditempel pada String yang menangani ini.
Berikut ini contoh dalam Prototipe:
Ini sepertinya salah satu fungsi yang Anda ingin orang lain atasi / pelihara. Saya membiarkan kerangka mengatasinya, daripada menulis lebih banyak kode.
sumber
truncate()
- Anda mungkin memerlukan ekstensi seperti underscore.string ._.trunc
yang melakukan ini.Mungkin saya melewatkan contoh di mana seseorang menangani nol, tetapi 3 jawaban TOP tidak bekerja untuk saya ketika saya punya nol (Tentu saya menyadari bahwa penanganan kesalahan ada dan jutaan hal lainnya BUKAN tanggung jawab orang yang menjawab pertanyaan, tetapi karena Saya telah menggunakan fungsi yang ada bersama dengan salah satu jawaban elipsis pemotongan yang sangat baik saya pikir saya akan menyediakannya untuk orang lain.
misalnya
javascript:
menggunakan fungsi pemotongan
Namun, pada news.comments menjadi nol, ini akan "pecah"
Terakhir
trunc function courtesy of KooiInc
Null checker sederhana saya (memeriksa hal "null" literal juga (tangkapan ini tidak terdefinisi, "", null, "null", dll.)
sumber
Terkadang nama file diberi nomor, di mana indeksnya mungkin di awal atau di akhir. Jadi saya ingin mempersingkat dari pusat string:
Ketahuilah bahwa saya menggunakan karakter isian di sini dengan lebih dari 1 byte dalam UTF-8.
sumber
Anda dapat menggunakan fungsi Ext.util.Format.ellipsis jika Anda menggunakan Ext.js.
sumber
Saya meningkatkan solusi Kooilnc. Solusi kompak yang sangat bagus. Ada satu kasus tepi kecil yang ingin saya atasi. Jika seseorang memasukkan urutan karakter yang sangat panjang untuk alasan apa pun, itu tidak akan terpotong:
sumber
Dengan Googling cepat saya menemukan ini ... Apakah itu bekerja untuk Anda?
sumber
Text-overflow: ellipsis adalah properti yang Anda butuhkan. Dengan ini dan limpahan: disembunyikan dengan lebar tertentu, semua yang melampaui yang akan mendapatkan efek tiga periode di akhir ... Jangan lupa untuk menambahkan spasi putih: nowrap atau teks akan diletakkan dalam beberapa baris.
sumber
Jawaban c_harm menurut saya adalah yang terbaik. Harap dicatat bahwa jika Anda ingin menggunakannya
Anda harus menggunakan konstruktor objek regexp daripada literal. Anda juga harus melarikan diri
\S
ketika mengubahnya.sumber
Gunakan kode berikut
sumber
Memperbaiki solusi Kooilnc:
Ini mengembalikan nilai string daripada objek String jika tidak perlu dipotong.
sumber
Saya baru-baru ini harus melakukan ini dan berakhir dengan:
Terasa bagus dan bersih bagiku :)
sumber
Saya suka menggunakan .slice () Argumen pertama adalah indeks awal dan yang kedua adalah indeks akhir. Segala sesuatu di antaranya adalah apa yang Anda dapatkan kembali.
sumber
Somewhere Smart: D
sumber
Fungsi ini melakukan bagian terpotong dan kata-kata bagian juga. (Ex: Mother into Moth ...)
pemakaian:
keluaran:
sumber