html - 查看整个选择选项

Question

我使用select固定宽度的元素。但是，当我将option元素嵌套在 中时select，它的文本很长，然后，当它option被选中时，它不会获得完整的背景宽度（我希望背景为 100%）并且文本也被隐藏了。

这是隐藏最后一个选项的示例。

.x {
  width: 200px;
  overflow-x: auto;
}

<select class="x" size="4">
  <option class="y" selected>xyz</option>
  <option class="y" selected>xyz</option>
  <option class="y" selected>xyz</option>
  <option class="y" selected>xyzxyzxyzxyzxyzxyzxyzxyzxyzxyzxyz</option>
</select>

标签： htmlcss

Answer 1

您可以使用单个 css 属性查看全宽。请添加一个类来解决问题：

.y{
   width: fit-content;
  }

使用这种样式，您可以看到背景颜色被填充到整个宽度。