列表框中所选项目的文本被修剪

Question

我有一个启用了引导程序和多项选择的列表框。

问题是当选择长文本选项（启用水平滚动）时，所选选项文本将被截断为控件的宽度（不包括滚动大小）。

<select class="form-control" style="overflow-x: auto;" multiple>
  <option>short text1</option>
  <option>These visual representations can convey a vast amount of non-text content. In addition to a short text equivalent, for many data images it may be necessary to provide more detailed information or supplemental content in the form of a long text alternative</option>
  <option>Complex data images include: charts, graphs, and diagrams. They allow sighted users to understand data and data relationships.</option>
</select>

尝尝我的味道

选区可以不被修剪吗？ 预先感谢您。

Answer 1

这就是我设法破解并让它工作的方法：

body {
  padding: 10px;
}

select.form-control {
  width: 50%;
  height: 100px;
  display: table-row;
  border: 1px solid #ccc;
}

select.form-control option {
  display: block;
  width: 100%;
  white-space: pre-wrap;
  padding: 5px 0;
}

<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->
<select class="form-control" multiple>
  <option>short text1</option>
  <option>These visual representations can convey a vast amount of non-text content. In addition to a short text equivalent, for many data images it may be necessary to provide more detailed information or supplemental content in the form of a long text alternative</option>
  <option>Complex data images include: charts, graphs, and diagrams. They allow sighted users to understand data and data relationships.</option>
</select>

我认为这并不完美，我组合的黑客可能还有一些我不知道的其他问题（例如，

sizes

属性玩得不好），但如果你绝对必须使用

select

做你的工作，也许现在就这样了。虽然更好的选择是使用插件来更好地控制。

我还没有研究太多，但这里有一些来自 HTML 选项规范的有趣内容：

文本 IDL 属性在获取时必须返回以下结果 从子文本内容中剥离和折叠空白 选项元素，按树顺序排列，不包括任何后代 选项元素的后代本身就是脚本 HTML 命名空间中的元素或 SVG 中的脚本元素 命名空间。

基本上意味着无法在普通的

<option>

元素内放置换行符或附加间距，因为这会被截断为只有一个。布局恶作剧是我能接近你想要的东西的唯一方法。

如果有人能详细说明为什么在

<select>

和

<option>

方面有这些限制（以及在哪里提到这些限制），我将非常感激。

Answer 2

队友通过添加以下 CSS 解决了该问题

select > option {
    display: table-row-group;
}

小提琴链接

Answer 3

我通过添加以下CSS解决了这个问题：

.form-control option { width: max-content; }