溢出隐藏在我的Firefox中无法正常工作

Question

溢出隐藏在我的Firefox浏览器中无法正常工作

＆＃13;

＆＃13;

select {
  overflow: hidden;
}

＆＃13;

<select multiple="" size="20">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>
  <option value="8">8</option>
  <option value="9">9</option>
  <option value="10">10</option>
</select>

＆＃13;

＆＃13;

＆＃13;

Firefox输出

其他浏览器输出

Answer 1

如果要在内容大于元素大小时控制元素行为，则使用overflow属性。

在您的情况下，容器大于内容，因此内容不会溢出。

也许您想要做的是调整选择的大小以匹配内容，如果是这种情况，您必须设置选择的大小以匹配选项的数量：

select {
  overflow: hidden;
}

<select multiple="">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>
  <option value="8">8</option>
  <option value="9">9</option>
  <option value="10">10</option>
</select>