如何在HTML中换行选项

How to Wrap Text in HTML Option

本文关键字：换行 选项 HTML      更新时间：2023-09-26

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

<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的值和文本可能非常不同。我想说，如果在这种情况下，你为文本选择的字符串比X长，则截断它。

jquery 示例

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

把它放在你的文档中，它会把你的文本缩小到更好的大小，把你的元素包装在一个div中，这样可以隐藏溢出，以后会变得一团糟，你会回到这里，试图解决较小字符串的类似问题。

只需使用，就可以在没有包装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文件中的匹配规则中。

将输入包装在div中，为div设置一些宽度，这样行就不会超出div，lik如下：

<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>
相关文章：