如何在select标签中显示多行文字标题?

时间:2017-09-19 11:46:58

标签: javascript jquery html css frontend

我正在使用<select>在具有固定宽度的select标记元素中创建列表。让我们说它是200px。

这是我的问题:我的标题因<select>修正宽度而被裁剪。

problem picture

这是我的期望:

expectation

在没有编辑选项标题的情况下实现该目标的任何建议?

3 个答案:

答案 0 :(得分:0)

简单地说,你可以使用下面的css:

<style>
 .test {word-wrap:break-word;} 
</style>


<html><header><title></title></header>
<body>
<select class="test">  </select>
</body>
</html>

答案 1 :(得分:0)

不幸的是,浏览器没有提供任何格式化的可能性。

您可以使用假选择(例如Bootstrap)或至少添加选项的标题以在鼠标悬停时提供整个文本:

<option title="Insert title of way too long Option text here">way too long Option text</option>

答案 2 :(得分:0)

您无法直接设置<options>标记样式,因为它支持有限的样式,并且这些元素的样式由用户的操作系统ref here处理。

及其支持风格

font-family font-* color background-color

您可以使用JQuery第三方plugins

设置样式