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>

Hypothesis

hi, i have added my answer that will work for you. – Onyx

I've never used this "select 2" plugin. But could you set CSS option { white-space: no-wrap} to force them to single lines. And then put in manual <br/>. – Tatianatatianas

rather go with css: white-space: pre-line; (see answer bottom) – Ioves

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

Hypothesis

This is the correct answer. The docs for v4 are here: select2.github.io/examples.html#templating – Nonaligned

This is a complement of your solution: https://mcmap.net/q/268448/-line-break-in-html-select-option – Conics

Answer 2

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.

Casement

As you can see, it makes the source html look a little messy because of the line break - this is necessary for this solution to work – Casement

Hey, thats a great solution, but i sticked to a javascript based solution(due to design reasons) . But your solution is the best among all the others. So the bounty goes to you... Thanks – Hypothesis

Answer 3

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

Ioves

This is a slight improvement over mine, keeps the source code a bit cleaner. – Casement

Answer 4

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.

Onyx

Hi @Bhavin, its a great alternate, but I am specifically looking to solve this problem for a select2 plugin. Still, thanks for your effort and help. – Hypothesis

Answer 5

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>

Holliehollifield

Answer 6

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

Uzziel

But what if the the amount of the installment was 100,000 . It would break since these values can be dynamic. Still, thanks for the suggestion and upvoted for the effort... cheers – Hypothesis

Answer 7

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

Edington

Do you have link to a sample javascript code which does this? – Hypothesis

i tried setting the values of the dropdown in the javascript and added a <br> tag in the place where i want the break. It didn't work. Any clue on that one? – Hypothesis

This does not look like a solution. Although its a great suggestion and looks good as a comment. – Hypothesis