7

我想在我的页面上放一个下拉列表，由于一个选项太长，当我单击选择菜单时，它会展开并覆盖页面的另一部分。

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

第二个选项太长并且会扩展。有什么办法可以将这么长的文本包装成 2 行？谢谢！

4

3 回答 3

6

看到 Select 的值和文本可能非常不同。我会说，如果您选择的文本中的字符串长于 X 截断它。

使用 jquery 的示例

$('#myselect option').each(function()
{
    var myStr = $(this).text();
    if(myStr.length > 15){$(this).text(myStr.substring(15));}
});

把它放在你的文档中准备好，它会将你的文本修剪到更好的大小，将你的元素包装在一个隐藏溢出的 div 中，稍后会弄得一团糟，你会回到这里试图解决一个由较小的字符串引起的类似问题。

于 2012-08-06T19:12:01.997 回答
5

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>

实际上，您应该width: 500px在 CSS 文件中添加匹配规则。

于 2012-08-06T19:10:56.733 回答
0

将该输入包装在一个 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>
于 2012-08-06T19:05:17.593 回答