Question

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

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

＆＃13;

<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>

＆＃13;

Taste me

是否可以不修剪选择？提前谢谢。

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 Spec for Option：

获取时的文本IDL属性必须返回结果从儿童文本内容剥离和折叠白色空间 option元素，按树的顺序排除任何后代选项元素的后代本身就是脚本 HTML命名空间中的元素或SVG中的脚本元素命名空间。

基本上没有办法在正常的<option>元素中放置换行符或额外的空格，因为它会被截断为只有一行。布局hax是我能够接近我认为你想要的唯一方式。

如果有人可以详细阐述为什么限制（以及提及它们的地方）<select>和<option>，我真的很感激。

Answer 2

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

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

fiddle link

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

2 个答案: