Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimanakah saya boleh mengawal lebar pilihan kotak pilihan dan melaksanakan elipsis limpahan teks menggunakan JavaScript?

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

Patricia Arquette
Patricia Arquetteasal
2024-10-25 08:27:29177semak imbas

How can I control the width of select box options and implement text overflow ellipsis using 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!

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