Cara menggunakan elips untuk menggantikan kandungan berlebihan dalam javascript

Dalam pembangunan halaman, kandungan teks selalunya melebihi had Pada masa ini, kami biasanya menggunakan elips untuk menggantikan kandungan yang berlebihan untuk memastikan halaman itu cantik dan ringkas. Dalam JavaScript, kita boleh menggunakan beberapa kaedah untuk mencapai fungsi ini.

1. Kaedah CSS

CSS sudah mempunyai atribut limpahan teks, yang digunakan untuk mengawal cara mengendalikan apabila teks melimpah dalam elemen. Atribut ini mempunyai tiga nilai:

1. klip: klip bahagian yang berlebihan.
2. ellipsis: Gunakan elips untuk menggantikan bahagian yang berlebihan.
3. nyah ditetapkan: Nyahtetap.

Menggunakan atribut limpahan teks memerlukan menetapkan atribut limpahan kepada tersembunyi atau tatal. Pada masa yang sama, atribut ruang putih perlu ditetapkan kepada nowrap untuk mengelakkan teks daripada dibalut.

Contohnya:

.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Gunakan nama kelas ini dalam HTML untuk mencapai kesan elipsis teks berlebihan.

2. Kaedah JavaScript

Jika kesan elipsis tidak dapat dicapai melalui CSS, JavaScript boleh digunakan untuk mencapainya. Berikut ialah beberapa kaedah pelaksanaan:

1. Menggunakan kaedah subrentetan()

Kaedah subrentetan() dalam JavaScript digunakan untuk mendapatkan sebahagian daripada rentetan. Anda boleh menggunakan kaedah ini untuk memotong rentetan dan menambah elipsis pada penghujungnya.

function truncateText(text, length) {
  var truncated = text.substring(0, length);
  return truncated + '...';
}

// 使用方法
var text = '这是一段超出了限定长度的文本。';
var truncatedText = truncateText(text, 10);

console.log(truncatedText); // "这是一段超出了限定长度的..."

Masalah kaedah ini ialah jika panjang teks kurang daripada panjang had, elips juga akan ditambah.

2. Gunakan kaedah slice()

Sama seperti kaedah substring(), kaedah slice() juga boleh memintas sebahagian daripada rentetan. Perbezaannya ialah kaedah slice() boleh menerima nombor negatif sebagai parameter, yang bermaksud memotong dari hujung.

function truncateText(text, length) {
  var truncated = text.slice(0, length);
  if (text.length > length) {
    truncated += '...';
  }
  return truncated;
}

// 使用方法
var text = '这是一段超出了限定长度的文本。';
var truncatedText = truncateText(text, 10);

console.log(truncatedText); // "这是一段超出了限定长度的..."

Menggunakan kaedah slice() boleh mengelakkan masalah menambah elipsis apabila panjang rentetan kurang daripada panjang terhad.

3. Gunakan kaedah split() dan join()

Anda boleh mula-mula menukar rentetan teks kepada tatasusunan, dan kemudian gunakan kaedah join() untuk menggabungkan elemen susunan n pertama ialah rentetan. Akhir sekali, tambahkan elipsis pada hujung rentetan.

function truncateText(text, length) {
  var words = text.split(' ');
  var truncatedWords = words.slice(0, length);
  if (words.length > length) {
    truncatedWords.push('...');
  }
  return truncatedWords.join(' ');
}

// 使用方法
var text = '这是一段超出了限定长度的文本。';
var truncatedText = truncateText(text, 5);

console.log(truncatedText); // "这是一段超出了限定长度的文本。"

Masalah kaedah ini ialah kaedah ini tidak dapat mengendalikan beberapa aksara khas, seperti baris baharu atau tab.

Ringkasan

Menggunakan sifat limpahan teks CSS boleh mencapai kesan elipsis teks dengan mudah, tetapi ia mungkin tidak sesuai untuk sesetengah kes khas. Untuk melaksanakan kesan elipsis dalam JavaScript, anda perlu memilih kaedah yang sesuai mengikut situasi tertentu. Walau apa pun, pelarasan dan pengoptimuman yang sesuai perlu dibuat berdasarkan keperluan sebenar.

Atas ialah kandungan terperinci Cara menggunakan elips untuk menggantikan kandungan berlebihan dalam javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!