Цвет фона при очень длинных настройках в 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 динамически вычисляет ширину выпадающего списка выбора и объявляет ширину внутренних дочерних элементов (т. Е. Ul, li), чтобы принять 100% ширины родительского элемента.(упоминается в их CSS-файле.)

Проблема здесь в том, что плагин select2 не обрабатывает регистр для длинного текста.

Это можно исправить, добавив простое css-свойство для переноса длинного текста в новую строку.Пример:

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

Ссылка на рабочую скрипту: http://jsfiddle.net/91fpuy64/2/

Кроме того, горизонтальная прокрутка внутри выпадающего списка с точки зрения UX не подходит.Следовательно, я предложил для переноса слов.