」工欲善其事,必先利其器。「—孔子《論語.錄靈公》
首頁 > 程式設計 > 如何控制選擇框選項的寬度並實現文字省略?

如何控制選擇框選項的寬度並實現文字省略?

發佈於2024-11-13
瀏覽:660

How to Control the Width of Select Box Options and Implement Text Ellipsis?

控制選擇框選項的寬度

在HTML 中,透過將樣式屬性套用至select 元素及其子選項元素,可以指定每個選項的寬度以確保其與選擇框寬度相符。然而,僅使用 CSS 實現這一點可能還不夠。

一個解決方案涉及合併 JavaScript 來進一步控制選項寬度並在必要時啟用文字省略號。提供的 JavaScript 程式碼引入了一個 ShortString 函數,該函數動態調整具有 .short 類別和 data-limit 屬性的選項元素內的文字。

以下是如何實現此解決方案:



select {
  width: 250px;
}

option {
  width: 250px;
}

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');
};

此方法可確保選項寬度與選擇框寬度相同,並且當選項文字超出指定限制時,多餘的文字將替換為省略號。

最新教學 更多>

免責聲明: 提供的所有資源部分來自互聯網,如果有侵犯您的版權或其他權益,請說明詳細緣由並提供版權或權益證明然後發到郵箱:[email protected] 我們會在第一時間內為您處理。

Copyright© 2022 湘ICP备2022001581号-3