如果选项值文本很长,则选择标签选项不会安装在选择标签内

问题描述 投票:0回答:0

select {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

option {
  width: 100%;
  box-sizing: border-box;
}
<div class="col-12">
  <select>
    <option value="">Choose an option</option>
    <option>
      In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content. Lorem ipsum may be used as a placeholder before final copy is available.
    </option>
    <option>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
    </option>
    <option>
      It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here
    </option>
  </select>
</div>

我的页面右侧有一个选择框。选项值的字长很长,所以它不适合屏幕,选项值变得比选择框本身更宽。我希望选项字段的大小与选择标签的大小相同。

html css sass css-selectors
© www.soinside.com 2019 - 2024. All rights reserved.