Question

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

也就是说，文本会缩短为THIS IS A VERY LONG OPTION THIS IS 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>

Answer 1

它是我默认的网站默认样式。

您可以通过将选择选项更改为const int TTDT_AUTOMATIC = 0; const int TTDT_AUTOPOP = 2; const int TTDT_INITIAL = 3;

来解决此问题。

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

display as table

select {
  height: 200px;
  width: 260px;
  overflow-x: scroll;
}

select >option{
 display:table;
}

Answer 2

用户代理样式被选中时，会将白色应用于选项。这可以在也已应用的蓝色背景上使用，但是背景只会扩展到option元素的大小，而不会缩放到文本大小。

一种解决方法是将滚动条添加到div容器中，而不是将其添加到选择容器中。

select.v1 {
  height: 378px;
  width: 260px;
  overflow-x: scroll;
}

.v2 {
  height: 378px;
  width: 260px;
  overflow-x: scroll;
}

.v2 select {
  overflow: hidden;
  height: 100%;
}

option {
  outline: 1px solid black;
}

<select multiple class="v1">
  <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>

<div class="v2">
  <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>
</div>

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

2 个答案: