HTML中select下拉框内容显示不全部分被覆盖的解决方法

前端技术 2023/09/06 HTML
今天，我遇到这样一个问题：查询栏中的下拉框中的内容过长，导致部分被覆盖了。

查询了一些资料，有的说用函数控制，有的说用事件控制，有的看不懂，有的实现起来太复杂了。后来，问了一下同事，有没有一些简单的方法，他告诉我在option中加title这个属性，于是按照他的方法试试，终于发现这个办法可行。这样，我就想记录下来，避免自己给忘记了。

1、具体实例如下

复制代码
代码如下:

<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\">
<head>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />
<title>HTML中的select下拉框内容显示不全的解决办法</title>
<style type=\"text/css\">
#area option{
width:140px;
}
</style>
</head>
<body style=\"width:80%; height:100px; text-align:center;\">
<div id=\"div_select\">
<label for=\"area\">字母：</label>
<select id=\"area\" name=\"area\" style=\"width:150px;\">
<option value=\"0\">全部</option>
<option value=\"1\" title=\"AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA\">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</option>
<option value=\"2\" title=\"BBBBBBBBBBBBBBBBBBBBBBBBBBBBBB\">BBBBBBBBBBBBBBBBBBBBBBBBBBBBBB</option>
<option value=\"3\" title=\"CCCCCCCCCCCCCCCCCCCCCCCCCCCCCC\">CCCCCCCCCCCCCCCCCCCCCCCCCCCCCC</option>
<option value=\"4\" title=\"DDDDDDDDDDDDDDDDDDDDDDDDDDDDDD\">DDDDDDDDDDDDDDDDDDDDDDDDDDDDDD</option>
<option value=\"5\" title=\"EEEEEEEEEEEEEEEEEEEEEEEEEEEEEE\">EEEEEEEEEEEEEEEEEEEEEEEEEEEEEE</option>
<option value=\"6\" title=\"FFFFFFFFFFFFFFFFFFFFFFFFFFFFFF\">FFFFFFFFFFFFFFFFFFFFFFFFFFFFFF</option>
<option value=\"7\" title=\"GGGGGGGGGGGGGGGGGGGGGGGGGGGGGG\">GGGGGGGGGGGGGGGGGGGGGGGGGGGGGG</option>
<option value=\"8\" title=\"HHHHHHHHHHHHHHHHHHHHHHHHHHHHHH\">HHHHHHHHHHHHHHHHHHHHHHHHHHHHHH</option>
<option value=\"9\" title=\"IIIIIIIIIIIIIIIIIIIIIIIIIIIIII\">IIIIIIIIIIIIIIIIIIIIIIIIIIIIII</option>
</select>
</div>
</body>
</html>


2、实例结果

 

3、动态数据

复制代码
代码如下:

<div id=\"div_select\">
<label for=\"area\">省份：</label>
<select id=\"area\" name=\"area\" style=\"width:150px;\">
<option value=\"0\">全部</option>
<c:forEach items=\"${list}\" var=\"area\">
<option value=\"${area.areaCode}\" title=\"${area.areaName}\">${area.areaName}</option>
</c:forEach>
</select>
</div>

本文地址：https://www.stayed.cn/item/16921

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案