html - 选择选项宽度自动增加

标签 html css

<分区>

.option100{
    width:100px !important;
} 

<select id="fieldOfInterestSelect" name="fieldOfInterest" class="form-control" required="">
  <option value="-1">SELECT ONE</option>
  <option value="4893" class="option100">Actual(R)rrrrrrrrrrrrrrrr</option>
  <option value="4891" class="option100">Customerrrrrrrrrrrrrr</option>
  <option value="4892" class="option100">Daterrrrrrr</option>
  <option value="4894" class="option100">Forecast(R)RRRRRR</option>
</select>

我担心的是,如果选项中文本的长度大于其容器的长度 (option),那么它应该自动转换(适合)为多行以适合容器的宽度。

最佳答案

这可能不是您想要的,但您可以通过使用“optgroup”标签为每个选项获取两行

<select>
  <optgroup label="Option 1">
    <option value="yes">Option 1 new Line</option>
  </optgroup>
  <optgroup label="Option 2">
    <option value="no">Option 2 new line</option>
  </optgroup>
</select> 

您可以从此链接找到有关此主题的更多详细信息 enter link description here

关于html - 选择选项宽度自动增加,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43405896/

上一篇:java - 如何将文本颜色设置为 TextArea 中的特定字符串?

下一篇:css - SASS mixin - 连接/折叠到单个属性?

相关文章:

html - 在台式计算机上尝试匹配引导卡高度

javascript - 添加链接元素 <a> 到段落 <p> Javascript

html - 在 IE9 中可以使用 3 个 DIVS 的响应式布局吗?

php - MySQL 存储关系(家族)树

javascript - Django 问题 : manage. py runserver 错误信息

javascript - 选中输入标签复选框时显示文本

javascript - IndexedDB - 存储和检索视频

HTML/CSS 通过 CSS 定义一系列字符样式

javascript - clipboard.js 悬停表格

html - 如何使导航栏适合页面