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. AppScan扫描结果分析及工具栏使用

    Appscan的窗口大概分三个模块,Application Links(应用链接), Security Issues(安全问题), and Analysis(分析) Application Links ...

  2. bootstrap select2 使用简单介绍

    1. 基本属性配置: $("#select2-id").select2({ templateResult : formatState, // 列表带图片 templateSelec ...

  3. jQuery源码逐行分析学习01(jQuery的框架结构简化)

    最近在学习jQuery源码,在此,特别做一个分享,把所涉及的内容都记录下来,其中有不妥之处还望大家指出,我会及时改正.望各位大神不吝赐教!同时,这也是我的第一篇前端技术博客,对博客编写还不是很熟悉,美 ...

  4. wireshark抓包图解 TCP三次握手/四次挥手详解[转]

    原文链接:http://www.seanyxie.com/wireshark%E6%8A%93%E5%8C%85%E5%9B%BE%E8%A7%A3-tcp%E4%B8%89%E6%AC%A1%E6% ...

  5. trie 树 模板

    #include <iostream> #include <cstdio> #include <algorithm> #include <cstring> ...

  6. cmd 与 bash 基础命令入门

    身为一个程序员会用命令行来进行一些简单的操作,不是显得很装逼嘛!?嘿嘿~ ヾ(>∀<) cmd 与 bash 基础命令入门       简介       CMD 基础命令          ...

  7. char数组中除去某个元素

    /* 本程序说明: char数组中除去某个元素(其实就是strcpy源码的变形) */ #include <iostream> #include <cassert> #incl ...

  8. Es6 Symbol.iterator

    Symbol.iterator 为每一个对象定义了默认的迭代器.该迭代器可以被 for...of 循环结构使用. --描述 当需要迭代一个对象的时候(比如在 for...of 循环的开始时),它的 @ ...

  9. Git团队协作之GitFlow & SoucceTree

    GitFlow 定义了一个围绕项目发布的严格的分支模型,仍然使用中央仓库作为开发者的交互中心 GitFlow分支 Master分支 Hotfix紧急修改 Release分支 Develop开发分支 F ...

  10. [业界良心系列] OI资料分享

    正式退役辣....混吃等死了这么久以后....终于也是必然的结果吧.... 分享一些资料: 链接:http://pan.baidu.com/s/1c1SRFmo 密码:bcfc 有一些资料有版权, 如 ...