select2中的选项过长时的背景色

Question

在使用select2的情况下，当我们有一个包含很长选项的列表时，列表中将具有这种背景：

这里是一个例子：

$('select').select2();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet"/>

<select>
<option>11111111111111111111111111111111111111111111111111111111111111111111111111111111111</option>
  <option>1</option>
</select>

我要比背景占据整个宽度。我在CSS中尝试了一些东西，但是在CSS中还不够好...

Answer 1

我认为这是最好的方法

$('select').select2();

.select2-results__option{ 
    overflow:hidden;
} 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet"/>

<select>
<option>11111111111111111111111111111111111111111111111111111111111111111111111111111111111</option>
  <option>1</option>
</select>

Answer 2

在上述情况下，select2插件正在动态计算select-dropdown的宽度，并声明内部子项（即ul，li）的宽度为父项宽度的100％。 （在其CSS文件中提及。）

这里的问题是，select2插件没有处理长文本的情况。

可以通过添加简单的css属性将长文本包装到换行符中来解决此问题。示例：

.select2-results__option{ 
    word-wrap:break-word;
} 

链接到工作提琴：http://jsfiddle.net/91fpuy64/2/

  

此外，从UX角度来看，在下拉菜单中进行水平滚动也不是一件好事。因此，我建议换行。