How to wrap text in a option inside select box? you can see the given below image

 <div >
       <div style="display: flex;">
          <i ></i>&nbsp;&nbsp;&nbsp;<strong>Dropdown</strong>
          <select id=""  style="/* width: 50%; */overflow: hidden; overflow-wrap: break-word; width: 100%;">
             <option id="default" value="">Select PickUp Point</option>
             <option value="B-01-62,Room - Bereich IT Site Service,Mooswaldallee 1, FREIBURG, , 79090, Pickup Timings - Mo-Fr: 09:00-12:00 and 13:00-16:00" ;">Bccnew-01-62,Room - Bereich coupan Site university,Mooswalgfr ghytdallee 1, FREIBBNHRYURG, , 7900090, Pickup Timings - Mo-Fr: 09:00-12:00 and 13:00-16:00</option>
          </select>
          <span>&nbsp;</span> <br> <br> <button id="digitalDeliverybtn" >Submit</button>
       </div>
    </div>

enter image description here

CodePudding user response：

You can simulate a select box and style it any way you want.

const sel = document.querySelector("#selected");
/* Create an array with the options */
const opt = [...document.querySelectorAll(".option")];
const inp = document.querySelector("#sel");

sel.addEventListener("click", () => {
  const opts = document.querySelector("#options");
  if (opts.classList.contains("open")) {
    /* If the <ul> is visible, hide it */
    opts.classList.remove("open");
  } else {
    /* If the <ul> is hidden, show it */
    opts.classList.add("open");
  }
});

opt.forEach((e, i, o) => {
  /* Add an event listener for each option */
  o[i].addEventListener("click", () => {
    /* Store the value of the option in a variable */
    const chosen = e.querySelector("span").innerHTML;
    const opts = document.querySelector("#options");
    /* Assign the value of the option to the select box */
    sel.innerHTML = chosen;
    /* Assign the value of the option to the hidden input field */
    inp.value = chosen;
    /* And close the <ul> */
    opts.classList.remove("open");
  });
})

.container {
  display: flex;
  flex-wrap: wrap;
  width: 25%;
}

#selected {
  border: thin solid darkgray;
  border-radius: 5px;
  background: lightgray;
  display: flex;
  align-items: center;
  cursor: pointer;
  height: 1.5em;
  margin-bottom: .2em;
  padding-left: .5em;
  min-width: 150px;
  position: relative;
}

#selected:after {
  font-family: FontAwesome;
  content: "\f0d7";
  margin-left: 1em;
  position: absolute;
  right: .5em;
}

#options {
  display: none;
  margin: 0;
  padding: 0;
}

#options.open {
  display: inline-block;
}

li {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  cursor: pointer;
  width: 500px;
}

li:hover {
  background-color: yellow;
}

li>img {
  margin-right: 1em;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<form>
  <input type="hidden" id="sel">
  <div >
    <div id="selected">Select PickUp Point</div>
    <ul id="options">
      <li ><span>Bccnew-01-62,Room - Bereich coupan Site university,Mooswalgfr ghytdallee 1, FREIBBNHRYURG, , 7900090, Pickup Timings - Mo-Fr: 09:00-12:00 and 13:00-16:00</span></li>
    </ul>
  </div>
</form>

CodePudding user response：

You cannot directly wrap text in a select box option. However, you can simulate this effect by using a combination of CSS and JavaScript.

First, you will need to set the select box width:

<select style="width:200px;">

Then, you will need to apply a style to the option so that the text wraps:

<option style="white-space:normal;">

Finally, you will need to use JavaScript to detect when the option is selected and dynamically adjust the select box width based on the length of the text:

$('select').on('change', function(){ $(this).css('width', this.value.length * 10); });