How to break a line in select2 dropdown?

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.

For select2 version 3.5 or below, I solved it with the properties "formatResult" & "formatSelection".

If you are using v4.0 or above use "templateResult" and "templateSelection" instead. And in the callback function use a jquery tag, so that the html tag for break line does not get sanitised.

Solved jsfiddle here shows it for select2 v3.5 and below.

I declared the select2 dropdown in javascript like this :

$('#color').select2({
placeholder: "Select something",
minimumResultsForSearch: Infinity, //removes the search box
formatResult: formatDesign,
formatSelection: formatDesign
});

and in the callback function - formatDesign() , I split all the strings and add br tag in it like this

function formatDesign(item) {
var selectionText = item.text.split(".");
var $returnString = selectionText[0] + "</br>" + selectionText[1];
return $returnString;
};

(note: for v4.0 and above use a jquery string, to add br to the string. It would look something like this :)

var $returnString = $('<span>'+selectionText[0] + '</br>' + selectionText[1] + '</span>');

The following CSS will help you with minimal impact.

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

but your html will look like:

<option value="2">select 2 installments of $100.
(special offer.)</option>

http://jsfiddle.net/mehd31hn/

(saw my answer is almost similar to Sworrub Wettham, but suggest using pre-line over pre since this doesn't effect the possible space between the new line.)