Bagaimana untuk Mengawal Lebar Pilihan Kotak Pilihan?

Menetapkan Lebar Pilihan Kotak Pilihan

Dalam kod HTML yang diberikan, lebar pilihan kotak pilih melebihi lebar pilihan kotak itu sendiri. Untuk menyelesaikan isu ini dan memastikan bahawa lebar pilihan sejajar dengan lebar kotak pilihan, mari gunakan penggayaan CSS.

Penyelesaian CSS:

<code class="css">select, option {
    width: 250px;
}

option {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}</code>

Dengan menetapkan lebar daripada kedua-dua kotak pilih dan pilihannya kepada 250px, kami menguatkuasakan lebar yang diingini. Selain itu, kami menggunakan limpahan: sifat tersembunyi untuk menyembunyikan sebarang teks yang melangkaui sempadan pilihan, memastikan teks itu tidak melimpahi kotak pilihan.

Nota: Walau bagaimanapun, CSS penyelesaian mungkin tidak mengehadkan sepenuhnya lebar pilihan kepada saiz tepat kotak pilihan dalam semua penyemak imbas disebabkan oleh potensi perbezaan dalam enjin pemaparan.

Penyelesaian Javascript:

Sebagai alternatif, fungsi JavaScript boleh dilaksanakan untuk melaraskan lebar pilihan secara dinamik berdasarkan had yang ditentukan:

<code class="js">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>

Fungsi ini membolehkan anda menentukan had lebar untuk setiap pilihan menggunakan atribut had data. Pilihan yang melebihi had akan dipotong dan diakhiri dengan elipsis (...).

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