Как сделать обтекание параметра select, если оно превышает максимальную ширину?

Question

Например, у меня есть что-то вроде этого:

С помощью следующего HTML-кода я устанавливаю максимальную ширину всего раскрывающегося списка, чтобы80%, что, как я ожидаю, повлияет на каждый из вариантов.

Я хочу иметь его, чтобы длинные варианты оборачивались в максимальной точке:

Где красные линии указывают, что считается "один вариант ", и поэтому, когда я наведу на него курсор, все между красными линиями должно быть выбрано

<select name=countries style="width:100%;max-width:30%;">
    <option value=gs selected="selected">All</option>
    <option value=gs>This is fine</option>
    <option value=gs>This message should wrap because it is very long</option>
    <optgroup label="Title">
        <option value="optcheck">Option groups are long, so they should wrap too</option>
    </optgroup>
</select>

https://jsfiddle.net/pxl70474/x7w85fnm/

Answer 1

Если вы используете начальную загрузку, вы можете использовать класс начальной загрузки начальной загрузки с атрибутом data-content.

 <select class="selectpicker form-control" data-live-search="true" 
     id="subject_teacher_drop_down">
   <option data-content="English" title="English">English</option>
   <option data-content="Methodology of social..."  title="Methodology of social science 
     with special reference to economics">
     Methodology of social science with special reference to economics
   </option>
 </select>

Answer 2

Вы можете попробовать переписать это так. Я вытащил это из W3Schools. Это просто пишет меню выбора для адаптивного просмотра. Вы можете применить его для своего сайта, поскольку он переносит текст. Или придумайте другой способ применить его на своем сайте.

var x, i, j, selElmnt, a, b, c;
/*look for any elements with the class "custom-select":*/
x = document.getElementsByClassName("custom-select");
for (i = 0; i < x.length; i++) {
  selElmnt = x[i].getElementsByTagName("select")[0];
  /*for each element, create a new DIV that will act as the selected item:*/
  a = document.createElement("DIV");
  a.setAttribute("class", "select-selected");
  a.innerHTML = selElmnt.options[selElmnt.selectedIndex].innerHTML;
  x[i].appendChild(a);
  /*for each element, create a new DIV that will contain the option list:*/
  b = document.createElement("DIV");
  b.setAttribute("class", "select-items select-hide");
  for (j = 0; j < selElmnt.length; j++) {
    /*for each option in the original select element,
    create a new DIV that will act as an option item:*/
    c = document.createElement("DIV");
    c.innerHTML = selElmnt.options[j].innerHTML;
    c.addEventListener("click", function(e) {
        /*when an item is clicked, update the original select box,
        and the selected item:*/
        var y, i, k, s, h;
        s = this.parentNode.parentNode.getElementsByTagName("select")[0];
        h = this.parentNode.previousSibling;
        for (i = 0; i < s.length; i++) {
          if (s.options[i].innerHTML == this.innerHTML) {
            s.selectedIndex = i;
            h.innerHTML = this.innerHTML;
            y = this.parentNode.getElementsByClassName("same-as-selected");
            for (k = 0; k < y.length; k++) {
              y[k].removeAttribute("class");
            }
            this.setAttribute("class", "same-as-selected");
            break;
          }
        }
        h.click();
    });
    b.appendChild(c);
  }
  x[i].appendChild(b);
  a.addEventListener("click", function(e) {
      /*when the select box is clicked, close any other select boxes,
      and open/close the current select box:*/
      e.stopPropagation();
      closeAllSelect(this);
      this.nextSibling.classList.toggle("select-hide");
      this.classList.toggle("select-arrow-active");
    });
}
function closeAllSelect(elmnt) {
  /*a function that will close all select boxes in the document,
  except the current select box:*/
  var x, y, i, arrNo = [];
  x = document.getElementsByClassName("select-items");
  y = document.getElementsByClassName("select-selected");
  for (i = 0; i < y.length; i++) {
    if (elmnt == y[i]) {
      arrNo.push(i)
    } else {
      y[i].classList.remove("select-arrow-active");
    }
  }
  for (i = 0; i < x.length; i++) {
    if (arrNo.indexOf(i)) {
      x[i].classList.add("select-hide");
    }
  }
}
/*if the user clicks anywhere outside the select box,
then close all select boxes:*/
document.addEventListener("click", closeAllSelect);

/*the container must be positioned relative:*/
.custom-select {
  position: relative;
  font-family: Arial;
}
.custom-select select {
  display: none; /*hide original SELECT element:*/
}
.select-selected {
  background-color: DodgerBlue;
}
/*style the arrow inside the select element:*/
.select-selected:after {
  position: absolute;
  content: "";
  top: 14px;
  right: 10px;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-color: #fff transparent transparent transparent;
}
/*point the arrow upwards when the select box is open (active):*/
.select-selected.select-arrow-active:after {
  border-color: transparent transparent #fff transparent;
  top: 7px;
}
/*style the items (options), including the selected item:*/
.select-items div,.select-selected {
  color: #ffffff;
  padding: 8px 16px;
  border: 1px solid transparent;
  border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
  cursor: pointer;
  user-select: none;
}
/*style items (options):*/
.select-items {
  position: absolute;
  background-color: DodgerBlue;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 99;
}
/*hide the items when the select box is closed:*/
.select-hide {
  display: none;
}
.select-items div:hover, .same-as-selected {
  background-color: rgba(0, 0, 0, 0.1);
}

<div class="custom-select" style="width:500px;">
  <select>
    <option value="0">HTML5</option>
    <option value="1">Option groups are long, so they should wrap too</option>
    <optgroup label="Title">
      <option value="optcheck">Hypertext Markup Language, a standardized system for tagging text files to achieve font, color, graphic, and hyperlink effects on World Wide Web pages.</option>    
    </optgroup>
  </select>
</div>