Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to break a line in select2 dropdown?

I am using a select 2 dropdown and then showing some long sentences in its content. I want to add line breaks to the sentence at the right place but the drop down is auto adjusting.

For example the content of the dropdown right now looks like this : enter image description here

The line looks like this right now

select 2 installments of $100. (special

offer.)

I Need to add controlled line breaks so that it looks like this:

select 2 installments of $100.

(special offer.)

I don't wan't to increase the width of dropdown or change the font size.

My code is here at jsfiddle:

<select multiple id="e1" style="width:300px">
    <option value="1">select 1 installment of $200</option>
    <option value="2">select 2 installments of $100. (special offer.)</option>
    <option value="3">select 3 installments of $89</option>
    <option value="4">select 4 installments of $50. (no interest in this option)</option>
    <option value="5">select 5 installments of $45</option>
</select>
like image 746
ishanbakshi Avatar asked Dec 08 '15 02:12

ishanbakshi


People also ask

How do you break a line in select option?

You can't format line breaks into an option; however, you can use the title attibute to give a mouse-over tooltip to give the full info. Use a short descriptor in the option text and give the full skinny in the title.

How do I add options in Select2?

New options can be added to a Select2 control programmatically by creating a new Javascript Option object and appending it to the control: var data = { id: 1, text: 'Barn owl' }; var newOption = new Option(data. text, data.id, false, false); $('#mySelect2'). append(newOption).

What Select2 dropdown?

By default, Select2 will attach the dropdown to the end of the body and will absolutely position it to appear above or below the selection container. Select2 will display the dropdown above the container if there is not enough space below the container, but there is enough space above it.

What does Select2 () do?

Select2 gives you a customizable select box with support for searching, tagging, remote data sets, infinite scrolling, and many other highly used options.


1 Answers

I've got a crude solution that still users the select2 plugin, using white-space:pre; to style the select2 li elements as such:

.select2-drop li {
  white-space: pre;
}

Here's the updated fiddle

If this works for you I can help you refine it further.

like image 70
Sworrub Wehttam Avatar answered Sep 25 '22 17:09

Sworrub Wehttam