Question

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

<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行吗？谢谢！

Answer 1

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

jquery的示例

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

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

Answer 2

只需使用

即可设置固定宽度而无需包裹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文件中的匹配规则中。

Answer 3

将该输入包装在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>

如何在HTML选项中包装文本

3 个答案: