Question

我在<option>框中有一些很长的<select>，但我不希望这个框太宽。问题是当我将盒子设置得更小时，无法读取全文。我正在考虑将文本的副本完全悬停在鼠标指针所在的选项上，但前提是文本太长而无法完全显示。

但是，如果我创建一个新元素，用jQuery说<p>，那么在我将其插入文档之前它没有宽度，所以我无法决定是否插入它。

即使我成功创建了它，我也不确定所有的样式都是一样的。

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

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

JS

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

<强> WORKING DEMO

Answer 2

USE style =＆＃34; width：xx％;＆＃34;

实施例

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

Answer 3

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

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') !!}

Answer 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

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

4 个答案: