如何解决列表框控件宽度不够的问题

该篇文章是我于2009年6月10日通过自己编写的工具，批量从位于在博客园的博客站点(http://chenxizhang.cnblogs.com)同步而来。文章中的图片地址仍然是链接到博客园的。特此说明！ 陈希章 原文地址：http://www.cnblogs.com/chenxizhang/archive/2008/07/29/1255411.html 原文标题：如何解决列表框控件宽度不够的问题 原文发表：2008/7/29 3:14:00

在设计界面的时候，我们经常会用到类似于列表框、组合框之类的控件，他们可以显示一系列的选项。但有一个常见的问题就是：如果列表项的文本长度超过了控件的宽度，那么就只能看到一部分内容。针对这个问题，该如何解决了？

我们分别以windows程序和web程序为例来讲解（前提是，组合框的宽度不允许放大）

下面这个图演示了如果列表项的文本宽度不大于控件宽度时的样子，这是正常的

下面这个图演示了如果列表项的文本宽度大于控件宽度时的样子，这时会有一部分文本是看不到的

那么如何解决这个问题呢？我们一般比较简单的做法是设置控件的一个特殊的属性：DropDownWidth，例如

这样的话，再运行窗口的时候，就看到了如下的效果

根据经验，我们觉得实现了如上效果，绝大多数情况下用户能感觉到更加舒适。但是同样的需求，换到web程序里面就没有那么简单了，因为web页面到了客户端浏览器的时候全部是HTML标记。而且也找不到那个所谓的DropdownWidth属性了。

比较好的思路是用Tooltip来帮助用户了解到当前这一行的全部内容。

第一步：把下面的脚本，保存为一个js文件，例如DropdownTooltip.js，你可以选择放在网站任意目录下，我们这里是把它放在根目录下

window.onload = showdropitem;
function showdropitem()
{
    var el = document.getElementsByTagName("select");
    for(i=0;i
    {
        for(j=0;j
        {
            el[i].options[j].title = el[i].options[j].text;
        }
    }
}

第二步：在需要该效果的页面的HEAD里面添加以下引用

   
   

然后，你就可以看到下面这样的效果

作者：陈希章 出处：http://blog.youkuaiyun.com/chen_xizhang 本文版权归作者所有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。