How to wrap text in a option inside select box - html

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