如何在 select2 下拉列表中换行？

Question

我正在使用 select 2 下拉菜单，然后在其内容中显示一些长句。我想在正确的地方给句子添加换行符，但是下拉菜单是自动调整的。

例如，下拉菜单的内容现在如下所示：

该行现在看起来像这样

select 2 installments of 0. (special

offer.)

我需要添加受控的换行符，使其看起来像这样：

select 2 installments of 0.

(special offer.)

我不想增加下拉菜单的宽度或更改字体大小。

我的代码在 jsfiddle:

<select multiple id="e1" style="width:300px">
    <option value="1">select 1 installment of 0</option>
    <option value="2">select 2 installments of 0. (special offer.)</option>
    <option value="3">select 3 installments of </option>
    <option value="4">select 4 installments of . (no interest in this option)</option>
    <option value="5">select 5 installments of </option>
</select>

Answer 1

你不能直接使用 HTML 和 CSS。您需要使用 javascript.

创建自定义下拉菜单

Answer 2

我认为您必须尝试不同的 select 选项插件才能根据您的要求执行相同的操作。我知道一个插件可以像你一样做一些事情。这是该插件的来源

这是演示 fiddle link :

http://jsfiddle.net/GXtpC/2099

您可以在此处找到此菜单的源代码： 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"></span>'},
        {find:/([^\|><]+) \| /g, rep: '<span class="ui-selectmenu-item-content"></span>'},
        {find:/([^\|><\(\)]+) (\()/g, rep: '<span class="ui-selectmenu-item-content"></span>'},
        {find:/([^\|><\(\)]+)$/g, rep: '<span class="ui-selectmenu-item-content"></span>'},
        {find:/(\([^\|><]+\))$/g, rep: '<span class="ui-selectmenu-item-footer"></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>

希望对您有所帮助。

Answer 3

如果您知道 select 下拉菜单的值，那么您可以在右侧添加填充，这样就可以打破它。这是根据您的要求进行的演示

$("#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 0</option>
    <option value="2">select 2 installments of 0. (special offer.)</option>
    <option value="3">select 3 installments of </option>
    <option value="4">select 4 installments of . (no interest in this option)</option>
    <option value="5">select 5 installments of </option>
    </select>

Answer 4

我试过 css itz 成功了检查这个

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

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

希望对你有用...谢谢

Answer 5

我有一个粗略的解决方案，它仍然使用 select2 插件，使用 white-space:pre; 来设置 select2 li 元素的样式：

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

这是更新后的 fiddle

如果这对您有用，我可以帮助您进一步完善它。

Answer 6

以下CSS 将对您产生最小的影响。

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

但是你的 html 看起来像：

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

http://jsfiddle.net/mehd31hn/

（看到我的回答与 Sworrub Wettham 几乎相似，但建议使用预行而不是预行，因为这不会影响新行之间可能的 space。）

Answer 7

对于 select2 3.5 或以下版本，我用属性 "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.

已解决 jsfiddle here 为 select2 v3.5 及以下版本显示它。

我在 javascript 中这样声明了 select2 下拉菜单：

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

在回调函数 - formatDesign() 中，我拆分了所有字符串并在其中添加了 br 标签，就像这样

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

如何在 select2 下拉列表中换行？

How to break a line in select2 dropdown?

javascript

css

html

drop-down-menu

jquery-select2