如何将文本包装在 select 框内的选项中

Question

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

 <div class=" assignment">
       <div style="display: flex;">
          <i class="fa fa-cube"></i>&nbsp;&nbsp;&nbsp;<strong>Dropdown</strong>
          <select id="" class="" 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" class="button pull-right">Submit</button>
       </div>
    </div>

enter image description here

Answer 1

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 class="container"> <div id="selected">Select PickUp Point</div> <ul id="options"> <li class="option"><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>

Answer 2

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); });