时间戳

首页 > 解决方案 > 列表框中的选定项目文本被修剪

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

问题描述

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

The problem is when an option with long text(horizo​​ntal scroll is enabled) is selected,the selected option text is truncated to the width of the control (excluding the scroll size).

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

尝尝我的

是否可以不修剪选择？先感谢您。

标签： htmlcsstwitter-bootstrap

解决方案

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

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 属性在获取时必须返回从选项元素的子文本内容中剥离和折叠空格的结果，以树顺序排列，不包括选项元素的后代的后代，这些后代本身是SVG 命名空间中的 HTML 命名空间或脚本元素。

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

如果有人能详细说明为什么限制（以及在哪里提及）<select>和<option>，我将不胜感激。

推荐阅读