Bagaimanakah saya boleh mengawal lebar pilihan kotak pilihan dan melaksanakan elipsis limpahan teks menggunakan JavaScript?

Mengawal Lebar Pilihan Kotak Pilihan

Dalam kotak pilihan anda, pilihan secara visual lebih luas daripada kotak itu sendiri, mewujudkan penjajaran yang salah. Untuk membetulkan ini, anda bertujuan untuk menetapkan lebar pilihan sama dengan lebar kotak. Selain itu, anda ingin melaksanakan elipsis limpahan teks untuk pilihan dengan teks yang panjang.

Pendekatan CSS Konvensional

Pada mulanya, anda mencuba penyelesaian menggunakan CSS, yang terbukti sia-sia. CSS sahaja tidak menyediakan cara untuk mengawal lebar pilihan secara langsung dalam kotak pilihan.

Intervensi JavaScript

Memandangkan CSS tidak dapat menawarkan penyelesaian, anda mencari alternatif dalam JavaScript. Kod JavaScript yang anda berikan berjaya mengubah suai lebar teks pilihan dalam kotak pilihan. Ia berfungsi dengan mengulangi setiap elemen pilihan dan mengubah suai teks dalamannya jika perlu.

Pengubahsuaian HTML dan CSS

Dalam HTML anda, anda menambahkan atribut had data pada setiap elemen pilihan untuk menentukan panjang teks maksimum yang dibenarkan. Dalam CSS anda, anda menetapkan lebar tetap 250px untuk kedua-dua kotak pilihan dan pilihan.

Coretan Kod

Berikut ialah coretan kod JavaScript:

function shortString(selector) {
  const elements = document.querySelectorAll(selector);
  const tail = '...';
  if (elements && elements.length) {
    for (const element of elements) {
      let text = element.innerText;
      if (element.hasAttribute('data-limit')) {
        if (text.length > element.dataset.limit) {
          element.innerText = `${text.substring(0, element.dataset.limit - tail.length).trim()}${tail}`;
        }
      } else {
        throw Error('Cannot find attribute \'data-limit\'');
      }
    }
  }
}

window.onload = function() {
  shortString('.short');
};

Demo

Apabila anda menjalankan skrip ini, pilihan dengan panjang teks lebih besar daripada had yang ditentukan akan dipotong dengan elipsis, memastikan ia sesuai dengan pilihan lebar kotak.

Atas ialah kandungan terperinci Bagaimanakah saya boleh mengawal lebar pilihan kotak pilihan dan melaksanakan elipsis limpahan teks menggunakan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!