如何显示很长选择选项的所有文本？答案

【问题标题】：How to show all text of very long select option?如何显示很长选择选项的所有文本？
【发布时间】：2014-08-20 14:51:50
【问题描述】：

我在<select> 盒子里有一些很长的<option>s，但我不希望盒子那么宽。问题是当我将框设置为较小时，无法阅读全文。我正在考虑将文本的副本准确地悬停在鼠标指针所在的选项上，但前提是文本太长而无法完全显示。

但是，如果我创建一个新元素，比如使用 jQuery 的 <p>，在我将其插入文档之前它没有宽度，因此我无法决定是否插入它。

即使我确实成功创建了它，我也不确定所有样式都相同。

有没有办法让这个想法发挥作用，或者有没有更好的方法来就地显示长 <option>s 的完整文本？

【问题讨论】：

如果你想在悬停时显示文本，你可以使用选项的title
这与此非常接近，尤其是给出的答案：stackoverflow.com/questions/5043634/html-select-problem
@J148 我正在为初学者这样做，但我必须等待每个人弹出。我希望有更好的解决方案。
@DrCord 我需要所有文本才能真正存在。此外，使用可变宽度字体也很难均匀截断。

标签： jquery html css forms

【解决方案1】：

这个呢？

<select id="muchtextselect">
  <option value="" title="This is some long text text This is some long text text This is some long text text ">This is some long text text This is some long text text This is some long text text </option>
  <option value="">Short Text</option>
  <option value="" title="This is some really, really long text">This is some really, really long text</option>
</select>

var maxLength = 15;
$('#muchtextselect > option').text(function(i, c) {
  if (c.length > maxLength) {
    return c.substr(0, maxLength) + '...';  
  }
});

WORKING DEMO

【讨论】：

感谢您的回答！我已经在使用width 和title 的组合来获得非常相似的效果，我只是不太喜欢它！

【解决方案2】：

使用 style="width:xx%;"

例子

<select name="data"  style="width:50%;">
 <option value="1">Lorem Ipsum</option>
 <option value="3">simply dummy</option>
 <option value="3">text of the printing and typesetting industry. Lorem Ipsum has been the industry's</option>
</select>

【讨论】：

谢谢，但如果<select> 框显示所有文本，则它太大了。我需要它是固定大小的。

【解决方案3】：

请使用带引导程序的 Select2 最新版本 :) 我在两天内找到了它

https://select2.org/

{!! Html::style('backend/dist/css/select2.min.css') !!}
{!! Html::style('backend/dist/css/select2-bootstrap.css') !!}
{!! Html::script('backend/dist/js/select2.min.js') !!}

【讨论】：

【解决方案4】：

您可以使用 max-width + text-emphasis css 属性。欲了解更多信息，您可以在这里查看：

http://www.w3schools.com/cssref/pr_dim_max-width.asp http://www.w3schools.com/cssref/css3_pr_text-emphasis.asp

【讨论】：

任何主流浏览器都不支持 text-emphasis 属性。 ???最大宽度无济于事。我需要某种方式来查看过长的文本，而不仅仅是隐藏它。
那么您如何看待默认隐藏的溢出和悬停时可见的溢出？
你试过了吗？我找不到任何会导致<option> 文本显示在<select> 元素之外的overflow 组合。