HTML中select下拉框内容显示不全部分被覆盖的解决方法
导读：收集整理的这篇文章主要介绍了HTML中select下拉框内容显示不全部分被覆盖的解决方法，觉得挺不错的，现在分享给大家，也给大家做个参考。 今天，我遇到这样一个问题：查询栏中的下拉框中的内容过长，导致部分被覆盖了。 查询了一些资料...
收集整理的这篇文章主要介绍了HTML中select下拉框内容显示不全部分被覆盖的解决方法，觉得挺不错的，现在分享给大家，也给大家做个参考。 今天，我遇到这样一个问题：查询栏中的下拉框中的内容过长，导致部分被覆盖了。 查询了一些资料，有的说用函数控制，有的说用事件控制，有的看不懂，有的实现起来太复杂了。后来，问了一下同事，有没有一些简单的方法，他告诉我在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>
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： HTML中select下拉框内容显示不全部分被覆盖的解决方法
本文地址： https://pptw.com/jishu/588037.html