如何控制選擇框選項的寬度？

設定選擇框選項的寬度

在給定的HTML 程式碼中，選取框選項的寬度超過了選取的寬度盒子本身。要解決此問題並確保選項寬度與選擇框寬度對齊，讓我們套用 CSS 樣式。

CSS 解決方案：

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

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

透過設定寬度將選擇框及其選項設為 250px，我們強制執行所需的寬度。此外，我們應用溢位：隱藏屬性來隱藏超出選項邊界的任何文本，確保文字不會溢出選擇框。

注意：但是，CSS由於渲染引擎的潛在差異，解決方案可能無法將選項寬度完全限制為所有瀏覽器中選擇框的確切大小。

Javascript 解決方案：

或者，可以實現JavaScript 函數來根據指定的限制動態調整選項寬度：

<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>

此函數允許您使用data-limit 屬性為每個選項定義寬度限制。超過限制的選項將被截斷並添加省略號 (...)。

以上是如何控制選擇框選項的寬度？的詳細內容。更多資訊請關注PHP中文網其他相關文章！