代码之家 › 专栏 › 技术社区 › ktm5124

为什么在select中选择选项会缩短选项的文本?

css html javascript

ktm5124 · 技术社区 · 7 年前

我正在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>

2 回复 | 直到 7 年前

Alen.Toma 7 年前

这是网站默认的风格我gusse。

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>

junvar 7 年前

选择选项时,“用户代理”样式会将白色应用于选项。这适用于同样应用的蓝色背景,但背景仅扩展到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>