javascript 如何在select2下拉菜单中换行？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34146856/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to break a line in select2 dropdown?
提问by ishanbakshi
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.
我正在使用 select 2 下拉列表，然后在其内容中显示一些长句。我想在正确的位置为句子添加换行符，但下拉菜单是自动调整的。
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.)
选择 100 美元的 2 期分期付款。（特别的
提供。）
I Need to add controlled line breaks so that it looks like this:
我需要添加受控换行符，使其看起来像这样：
select 2 installments of $100.
(special offer.)
选择 100 美元的 2 期分期付款。
（特价。）
I don't wan't to increase the width of dropdown or change the font size.
我不想增加下拉列表的宽度或更改字体大小。
My code is here at jsfiddle:
我的代码在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>
采纳答案by ishanbakshi
For select2 version 3.5 or below, I solved it with the properties "formatResult" & "formatSelection".
对于 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.
如果您使用的是 v4.0 或更高版本，请改用“templateResult”和“templateSelection”。并在回调函数中使用 jquery 标记，以便断行的 html 标记不会被清理。
Solved jsfiddle hereshows it for select2 v3.5 and below.
Solved jsfiddle here显示它适用于 select2 v3.5 及更低版本。
I declared the select2 dropdown in javascript like this :
我在 javascript 中声明了 select2 下拉菜单，如下所示：
$('#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
在回调函数 - 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 :)
（注意：对于 v4.0 及更高版本，使用 jquery 字符串，将 br 添加到字符串中。它看起来像这样:)
var $returnString = $('<span>'+selectionText[0] + '</br>' + selectionText[1] + '</span>');
回答by Max Sassen
The following CSS will help you with minimal impact.
以下 CSS 将以最小的影响帮助您。
.select2-drop li {
white-space: pre-line;
}
but your html will look like:
但你的 html 看起来像：
<option value="2">select 2 installments of 0.
(special offer.)</option>
(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.)
（看到我的答案几乎与 Sworrub Wettham 相似，但建议使用 pre-line over pre 因为这不会影响新行之间的可能空间。）
回答by Bhavin Solanki
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
http://jsfiddle.net/GXtpC/2099
You can find source code of this menu is here : https://github.com/fnagel/jquery-ui/wiki/Selectmenu
你可以在这里找到这个菜单的源代码：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>Hope this will help you.
希望这会帮助你。
回答by Sworrub Wehttam
I've got a crude solution that still users the select2 plugin, using white-space:pre;to style the select2 lielements as such:
我有一个粗略的解决方案，它仍然使用 select2 插件，white-space:pre;用于设置 select2li元素的样式：
.select2-drop li {
white-space: pre;
}
Here's the updated fiddle
这是更新的小提琴
If this works for you I can help you refine it further.
如果这对您有用，我可以帮助您进一步完善它。
回答by Shailesh
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 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>回答by Raj Rana
I tried in css itz worked check this
我在 css itz 中尝试过检查这个
.select2-results .select2-result-label
{
width:200px;
word-wrap: break-word;
}
.select2-search-choice
{
width:200px;
}
http://jsfiddle.net/Rajkumarrana/fyhsz9ra/12/
http://jsfiddle.net/Rajkumarrana/fyhsz9ra/12/
Hope Its useful for you... Thanks
希望它对你有用...谢谢
回答by TheGeekYouNeed
You cannot do it with straight HTML and CSS. You will need to create a custom dropdown with javascript.
你不能用直接的 HTML 和 CSS 来做到这一点。您将需要使用 javascript 创建自定义下拉列表。
