How to break a line in select2 dropdown?

Question

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>

Answer 1

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

Answer 2

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.)

Answer 3

I think you have to try different select option plugin to do the same as per your requirement. I know one plugin that can do something like you. Here is the source of that plugin

Here is the demo fiddle link :

http://jsfiddle.net/GXtpC/2099

You can find source code of this menu is here : https://github.com/fnagel/jquery-ui/wiki/Selectmenu

$(function(){            
  
    
    $('select#speedB').selectmenu({
        style:'popup', 
        width: 300,
        format: addressFormatting
    });
    
    
    
    
});        

//a custom format option callback
var addressFormatting = function(text){
    var newText = text;
    //array of find replaces
    var findreps = [
        {find:/^([^\-]+) \- /g, rep: '<span class="ui-selectmenu-item-header">$1</span>'},
        {find:/([^\|><]+) \| /g, rep: '<span class="ui-selectmenu-item-content">$1</span>'},
        {find:/([^\|><\(\)]+) (\()/g, rep: '<span class="ui-selectmenu-item-content">$1</span>$2'},
        {find:/([^\|><\(\)]+)$/g, rep: '<span class="ui-selectmenu-item-content">$1</span>'},
        {find:/(\([^\|><]+\))$/g, rep: '<span class="ui-selectmenu-item-footer">$1</span>'}
    ];
    
    for(var i in findreps){
        newText = newText.replace(findreps[i].find, findreps[i].rep);
    }
    return newText;
}        

/* demo styles */
body {font-size: 62.5%; font-family:"Verdana",sans-serif; }
fieldset { border:0; }  
label,select,.ui-select-menu { float: left; margin-right: 10px; }
select { width: 200px; }    
.wrap span.ui-selectmenu-item-header,
.wrap ul.ui-selectmenu-menu li a { text-decoration: underline !important; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script src="http://github.felixnagel.com/selectmenu/ui/jquery.ui.selectmenu.js"></script>
<script src="http://github.felixnagel.com/selectmenu/ui/jquery.ui.position.js"></script>
<script src="http://github.felixnagel.com/selectmenu/ui/jquery.ui.widget.js"></script>
<script src="http://github.felixnagel.com/selectmenu/ui/jquery.ui.widget.js"></script>
<script src="http://github.felixnagel.com/selectmenu/ui/jquery.ui.core.js"></script>
<link href="http://github.felixnagel.com/selectmenu/themes/base/jquery.ui.selectmenu.css" rel="stylesheet"/>
<link href="http://github.felixnagel.com/selectmenu/themes/base/jquery.ui.theme.css" rel="stylesheet"/>
<link href="http://github.felixnagel.com/selectmenu/themes/base/jquery.ui.core.css" rel="stylesheet"/>
<form action="#">
    <br /><br /><br />
    
    
    <h2>Same with option text formatting</h2>
    <fieldset>
        <label for="speedB">Select an Address:</label>
        <select name="speedB" id="speedB">
            <option>John Doe - 78 West Main St Apt 3A | Bloomsburg, PA 12345 (footer text)</option>
            <option selected="selected">Jane Doe - 78 West Main St Apt 3A | Bloomsburg, PA 12345 (footer text)</option>
            <option>Joseph Doe - 78 West Main St Apt 3A | Bloomsburg, PA 12345 (footer text)</option>
            <option>Mad Doe Kiiid - 78 West Main St Apt 3A | Bloomsburg, PA 12345 (footer text)</option>
        </select>
    </fieldset>
    
    
</form>

Hope this will help you.

Answer 4

If you know the value of your select dropdown then you can add padding on right side so it can break it. Here is a demo as per your requirement

$("#e1").select2();

.select2-results li{padding-right:80px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/select2/3.2/select2.css" rel="stylesheet"/>
<script src="http://cdnjs.cloudflare.com/ajax/libs/select2/3.2/select2.min.js"></script>
<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>

Answer 5

I tried in css itz worked check this

   .select2-results .select2-result-label
{
  width:200px;
  word-wrap: break-word;
}
.select2-search-choice
{
  width:200px;
}

http://jsfiddle.net/Rajkumarrana/fyhsz9ra/12/

Hope Its useful for you... Thanks

Answer 6

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.

Answer 7

You cannot do it with straight HTML and CSS. You will need to create a custom dropdown with javascript.