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. jmeter用Firefox录制https协议证书问题解决

    录制脚本的时候,比如录制https协议的百度网站 https://www.baidu.com ,所有录制设置均正常,但是在jmeter录制控制器里面就是没有任何录制的请求. 这个时候提示说证书不对 1 ...

  2. 序列化日期（yyyy-MM-dd hh:mm:ss）

    var getDateFormat = function() { var _date = new Date(); //实例化一个Date对象 var _complete = function(valu ...

  3. Java语言程序设计基础篇第10版第5章习题答案

    5.1 1 public class Demo { public static void main(String[] args) { // 创建一个输入对象 java.util.Scanner inp ...

  4. python3的zip函数

    zip函数接受任意多个可迭代对象作为参数,将对象中对应的元素打包成一个tuple,然后返回一个可迭代的zip对象. 这个可迭代对象可以使用循环的方式列出其元素 若多个可迭代对象的长度不一致,则所返回的 ...

  5. Android+TensorFlow+CNN+MNIST 手写数字识别实现

    Android+TensorFlow+CNN+MNIST 手写数字识别实现 SkySeraph 2018 Email:skyseraph00#163.com 更多精彩请直接访问SkySeraph个人站 ...

  6. wpf datagrid row height 行高自动计算使每行行高自适应文本

    wpf 的datagrid的行高 要么是Auto,要么是定值:但会带来麻烦就是每行行高都一样. 当需要按内容(主要是wrap 换行的textbox或textblock)来动态调整行高的时候,需要用到d ...

  7. python3加密解密模块 cryptography

    cryptography 的目标是成为"人类易于使用的密码学包cryptography for humans",就像 requests 是"人类易于使用的 HTTP 库H ...

  8. thinkPHP数据库操作

    thinkPHP如果要对数据库操作,一般来说首先要做的是在配置文件中链接数据库,然后用M方法实例化一张表,然后就是对表的操作了 可以开启调试功能查看程序执行的sql语句: 1.开启调试功能(默认是已经 ...

  9. linux打印彩色字

    echo显示带颜色,需要使用参数-e格式如下:echo -e "\033[字背景颜色;文字颜色m字符串\033[0m"例如: echo -e "\033[41;37m T ...

  10. VMware Workstation All Key

    官方下载:https://www.vmware.com/products/workstation-pro/workstation-pro-evaluation.html 懒人打包:链接:https:/ ...