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 :

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>

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