如何使用 JavaScript 控制選擇框選項的寬度並實現文字溢出省略？

控制選擇框選項的寬度

在選擇框中，選項在視覺上比框本身更寬，從而產生不對齊。為了修正這個問題，您的目標是將選項的寬度設定為等於框的寬度。此外，您希望對文字較長的選項實作文字溢位省略。

傳統 CSS 方法

最初，您嘗試使用 CSS 解決方案，但事實證明是徒勞無功的。 CSS 本身並不能提供直接控制選擇框中選項寬度的方法。

JavaScript 幹預

由於 CSS 無法提供解決方案，您尋求解決方案JavaScript 中的替代方案。您提供的 JavaScript 程式碼成功修改了選擇框中選項的文字寬度。它的工作原理是迭代每個選項元素並在必要時修改其內部文字。

HTML 和 CSS 修改

在 HTML 中，您將 data-limit 屬性新增至每個選項元素指定允許的最大文字長度。在 CSS 中，您為選擇框和選項設定了 250px 的固定寬度。

程式碼片段

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

示範

示範示範示範

以上是如何使用 JavaScript 控制選擇框選項的寬度並實現文字溢出省略？的詳細內容。更多資訊請關注PHP中文網其他相關文章！