如何在HTML选项中换行文本？

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>

第二个选项太长了，会扩展。有没有办法将这样的长文本分成两行呢？ 谢谢！

- Chengzhi

---

不可以在原生选择框中换行文本。建议将选择框的宽度设置为固定宽度。 - Kevin B

Answer 1

考虑到选择框的值和文本可能非常不同，如果选择框中的文本字符串长度超过X，则应将其截断。

使用jquery的示例：

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

把这段代码放在文档准备好后，它会将你的文本裁剪到更合适的大小，并将你的元素包装在一个div中以隐藏溢出。如果你将来需要处理较小的字符串，使用这种方法可能会导致一些混乱。

- chris

---

+1，我没有想到这个。 - bkconrad

改进这段代码有两个要点：使用substring(0,15)，否则将会获取最后 15 个字符。另外，我喜欢在选项文本被截断时添加省略号，这样用户就知道已经被截断了，例如：text(myStr.substring(0,15) + '...')。回答已编辑以包含这些内容... - Marcus

另一个快速的评论：在使用此JavaScript时，请注意HTML中选项文本之间的额外空格。您的浏览器可能已将其清除，但JS length方法不会这样做。 - Marcus

这样会截掉前几个字符，我的用户不知道他们选择了什么。我更喜欢使用文本换行而不是文本截断。 - Ezeilo Uchenna

Answer 2

可以通过简单地使用设置固定宽度而无需包装

，来完成固定宽度的设置

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

在实践中，你应该在CSS文件的相应规则中添加width: 500px。

- bkconrad

---

太棒了 - 这对我非常有效。 - Anupam

用户看不到右侧的其余文本... 用户不知道他们选择了什么。 - Ezeilo Uchenna

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>

- Shreedhar