javascript - 为什么在选择中选择一个选项会缩短选项的文本？

<分区>

我在 Chrome 上运行这段代码。如您所见，我有一个带有水平滚动条的 select multiple 元素。文本溢出，因此导致它滚动。但是，当您选择特定选项并向右滚动时，它会 chop 所选选项的文本。

也就是说，文本被缩短为THIS IS A VERY LONG OPTION THIS A VERY L。

这是为什么，我该如何防止它发生？

select {
  height: 378px;
  width: 260px;
  overflow-x: scroll;
}

<select multiple>
  <option>THIS IS A VERY LONG OPTION THIS IS A VERY LONG OPTION</option>
  <option>THIS IS A VERY LONG OPTION THIS IS A VERY LONG OPTION</option>
  <option>THIS IS A VERY LONG OPTION THIS IS A VERY LONG OPTION</option>
  <option>THIS IS A VERY LONG OPTION THIS IS A VERY LONG OPTION</option>
  <option>THIS IS A VERY LONG OPTION THIS IS A VERY LONG OPTION</option>
  <option>THIS IS A VERY LONG OPTION THIS IS A VERY LONG OPTION</option>
</select>

最佳答案

我猜这是网站默认样式。

您可以通过将选择选项更改为 display as table 来解决此问题

这可能无法为您的问题提供完整的答案，但能够帮助您理解问题并为您提供解决方案。

select {
  height: 200px;
  width: 260px;
  overflow-x: scroll;
}

select >option{
 display:table;
}

<select multiple>
  <option>THIS IS A VERY LONG OPTION THIS IS A VERY LONG OPTION</option>
  <option>THIS IS A VERY LONG OPTION THIS IS A VERY LONG OPTION</option>
  <option>THIS IS A VERY LONG OPTION THIS IS A VERY LONG OPTION</option>
  <option>THIS IS A VERY LONG OPTION THIS IS A VERY LONG OPTION</option>
  <option>THIS IS A VERY LONG OPTION THIS IS A VERY LONG OPTION</option>
  <option>THIS IS A VERY LONG OPTION THIS IS A VERY LONG OPTION</option>
</select>

关于javascript - 为什么在选择中选择一个选项会缩短选项的文本？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55874550/

上一篇：javascript - 我可以在不改变 html 标签的情况下编辑 body 的 innerText 吗？

下一篇：html - 禁用元素上的波纹效果

html - 在 Bootstrap 表单中并排显示两个字段

html - 在 Django 中为 <table> 设置列宽

javascript - 使用 window.onunload 调用时，AJAX 调用在 IE8 及更低版本中中止

JavaScript:当文本位于文本区域内时，所选文本不会被替换

javascript - 根据包含字符串的值选择 <select> <option>

javascript - Tablesorter 解析器忽略 div 元素

css - 将鼠标悬停在任一元素上时更改图像和背景颜色

javascript - 如何忽略 TestCafe 中的 "ResizeObserver loop limit exceeded"

javascript - AngularJS TreeView 过滤表