如何使用 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中文网其他相关文章！