html - 列表框中的选定元素文本被修剪

Question

我有一个启用了 Bootstrap 和多选的列表框。

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

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

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>

我不认为这是完美的，我放在一起的 hack 可能有一些我不知道的其他问题(例如，sizes 属性不能很好地发挥作用)但是如果你绝对必须 使用 select做你的工作，也许现在就可以了。虽然更好的选择是使用插件来更好地控制。

我没有四处闲逛，但这里有一些来自 HTML Spec for Option 的有趣内容:

The text IDL attribute, on getting, must return the result of stripping and collapsing white space from the child text content of the option element, in tree order, excluding any that are descendants of descendants of the option element that are themselves script elements in the HTML namespace or script elements in the SVG namespace.

基本上意味着无法在普通 <option> 中放置换行符或额外的间距元素，因为它会被截断为一个。布局 hax 是我接近你想要的东西的唯一方法。

如果有人能详细说明为什么在 <select> 时有限制(以及在何处提及)和 <option> , 我真的很感激。