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>

HTML中的select下拉框内容显示不全的解决办法的更多相关文章

  1. ionic中select下拉框点击无反应解决办法

    两种解决办法: 1.在select外的div加入属性 data-tap-disabled=”true” 2.找到ionic.bundle.js文件 的下面这个函数,添加如图两行代码  

  2. html固定宽度下拉框内容显示不全问题解决方法

    不少时候在页面中为了布局的需要,下拉列表<select>的宽度需要设成比较小的值,这时如果恰巧它包含的选择项<option>的内容比较长,那么超出select宽度的部分将会被截 ...

  3. Vue ElementUI表格table中使用select下拉框组件时获取改变之前的值

    目前项目中有一个场景,就是表格中显示下拉框,并且下拉框的值可以更改,更改后提交后台更新.因为这个操作比较重要,所以切换时会有一个提示框,提示用户是否修改,是则走提交逻辑,否则直接返回,什么也不做. 之 ...

  4. ThinkPHP中ajax绑定select下拉框无法显示

    html代码: 控制器代码: 其中的<option value="{$vo.gradeId}">{$one.gradeName}</option> 在操作过 ...

  5. easyUI combobox下拉框很长，easyUI combobox下拉框如何显示滚动条的解决方法

    如下图,combobox下拉框里内容很多时,会导致下拉框很长,很不美观. 如何使得combobox下拉框显示滚动条 方法:把属性panelHeight:"auto"注释掉即可. $ ...

  6. firefox与chrome中对select下拉框中的option支持问题

    firefox可以直接修改option的字体样式,但是chrome中option的字体样式是继承select的,这个是在项目中遇到的,具体的可以看一下 http://www.cnblogs.com/r ...

  7. html中的select下拉框

    <select name="effective"> <option value="">请选择</option> <op ...

  8. 纯css实现select下拉框并排显示

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. layui下select下拉框不显示或没有效果

    Layui会对select.checkbox.radio等原始元素隐藏,从而进行美化修饰处理.但这需要依赖于form组件,所以你必须加载 form,并且执行一个实例.值得注意的是:导航的Hover效果 ...

随机推荐

  1. dom4j读取xml

    -----记录和回顾是一个比学习更重要的环节----- 一.首先,我们需要知道xml是做什么的 1.作为软件的配置文件 2.作为数据的载体(小型的数据库) 二.xml的语法 xml文件以xml后缀名结 ...

  2. javascript 中 dom.getAttribute("value") 与dom.value的差异

    dom 是一个 input type="text" 手动修改 input 的值, 使用 dom.getAttribute("value") 只能得到 html ...

  3. Golang时间格式化

    PHP中格式化时间很方便,只需要一个函数就搞定: date("Y-m-d H:i:s") 而在Golang中,用的是"2006-01-02 15:04:05"这 ...

  4. vue打包后不使用服务器直接访问方法

    根据官网打包执行npm run build 后dist文件夹打开的index.html 是空白 需要开启http服务器才能访问,以下是解决办法 1.找到config文件夹下的index文件 修改成 2 ...

  5. LongAdder基础

    LongAdder是JDK8中并发包中的一个新类,和AtomicLong都使用CAS,但是性能比AtomicLong更好. LongAdder在AtomicLong的基础上进行了热点分离,热点分离类似 ...

  6. 自己动手实践 spring retry 重试框架

    前序 马上过年了,预祝大家,新年快乐,少写bug 什么是spring retry? spring retry是从spring batch独立出来的一个能功能,主要实现了重试和熔断. 什么时候用? 远程 ...

  7. .net使用AsposeWord导出word table表格

    本文为原创,转载请注明出处 1.前言 .net平台下导出word文件还可以使用Microsoft.Office.Interop和NPOI,但是这两者都有缺点,微软的Office.Interop组件需要 ...

  8. ManagementObjectSearcher Path

    为了获取硬件信息,你还需要创建一个ManagementObjectSearcher 对象.ManagementObjectSearcher searcher = new ManagementObjec ...

  9. 一个很好的MySQL在线学习平台

    一个很好的MySQL在线学习平台 https://www.techonthenet.com/sql/

  10. ssh快速登录远程服务器

    以前我的做法是创建一个shell脚本运行,今天了解了可以按照下面的方式: vi .ssh/config ,写入如下内容 HOST api User abc Port HostName 123.123. ...