Javascript 如何在 HTML 选项中包装文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11834231/
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 Wrap Text in HTML Option
提问by Chengzhi
I want to put a dropdown list on my page, As one option is too long, when I click the select menu, it will expand and cover the other part of the page.
我想在我的页面上放一个下拉列表，由于一个选项太长，当我单击选择菜单时，它会展开并覆盖页面的其他部分。
<select id="selectlist" name="SelectProgram">
<option value="LIR" >LIR</option>
<option value="How to word wrap text in HTML?">How to word wrap text in HTML? CSS / HTML text wrap for webkit</option>
The second option is too long and will expand. Is there any way I could wrap such a long text into 2 lines? Thank you!
第二个选项太长，会扩展。有什么办法可以将这么长的文本包装成 2 行吗？谢谢！
采纳答案by chris
Seeing as the value and text of a Select can be very different. I would say if in the event a string thats in your select for the text is longer than X truncate it.
将 Select 的值和文本视为可能非常不同。我会说，如果您选择的文本字符串比 X 长，则将其截断。
Example with jquery
使用 jquery 的示例
$('#myselect option').each(function()
{
var myStr = $(this).text();
if(myStr.length > 15){$(this).text(myStr.substring(15));}
});
put that in your document ready, and it will trim your text down to a better size, wrapping your elements in a div that will hide the overflow is going to make something of a mess later, and you will be back here trying to solve a similar issue caused by that for strings that are smaller.
把它放在你的文档中，它会将你的文本修剪成更好的大小，将你的元素包裹在一个 div 中，这将隐藏溢出会在以后弄得一团糟，你会回到这里试图解决一个由较小的字符串引起的类似问题。
回答by bkconrad
Setting a fixed width can be done without the wrapping divby simply using
设置一个固定的宽度可以在没有包裹来完成div通过简单地使用
<select id="selectlist" name="SelectProgram" style="width: 500px">
<option value="LIR" >LIR</option>
<option value="How to word wrap text in HTML?">How to word wrap text in HTML? CSS / HTML text wrap for webkit</option>
</select>
In practice, you should put width: 500pxin a matching rule in your CSS file.
实际上，您应该width: 500px在 CSS 文件中放入匹配规则。
回答by Shreedhar
wrap that input in a div, put some width for div, so that line will not go outside the div, lik below :
将该输入包装在一个 div 中，为 div 设置一些宽度，这样该行就不会超出 div，如下所示：
<div id="something" style="width:500px">
<select id="selectlist" name="SelectProgram">
<option value="LIR" >LIR</option>
<option value="How to word wrap text in HTML?">How to word wrap text in HTML? CSS / HTML text wrap for webkit</option>
</select>
</div>
