Bagaimana untuk Mengawal Lebar Pilihan Kotak Pilih dan Melaksanakan Elipsis Teks?

Mengawal Lebar Pilihan Kotak Pilihan

Dalam HTML, dengan menggunakan atribut gaya pada kedua-dua elemen pilih dan elemen pilihan anaknya, ia adalah mungkin untuk menentukan lebar setiap pilihan untuk memastikan ia sepadan dengan lebar kotak pilih. Walau bagaimanapun, mencapai ini dengan CSS sahaja mungkin tidak mencukupi.

Satu penyelesaian melibatkan menggabungkan JavaScript untuk mengawal lagi lebar pilihan dan mendayakan elipsis teks apabila perlu. Kod JavaScript yang disediakan memperkenalkan fungsi shortString yang melaraskan teks secara dinamik dalam elemen pilihan yang mempunyai kelas .short dan atribut had data.

Begini cara untuk melaksanakan penyelesaian ini:

<code class="html"><!-- HTML -->
<select name="select" id="select">
  <option class="short" data-limit="37" value="Select your University">Select your University</option>
  <option class="short" data-limit="37" value="Bangladesh University of Engineering and Technology">Bangladesh University of Engineering and Technology</option>
  <option class="short" data-limit="37" value="Mawlana Bhashani Science and Technology University">Mawlana Bhashani Science and Technology University</option>
</select></code>

<code class="css"><!-- CSS -->
select {
  width: 250px;
}

option {
  width: 250px;
}</code>

<code class="js"><!-- 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');
};</code>

Pendekatan ini memastikan bahawa lebar pilihan adalah sama dengan lebar kotak pilihan dan apabila teks pilihan melebihi had yang ditentukan, teks lebihan digantikan dengan elipsis.

Atas ialah kandungan terperinci Bagaimana untuk Mengawal Lebar Pilihan Kotak Pilih dan Melaksanakan Elipsis Teks?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!