限制选择列表的初始宽度答案

【问题标题】：Limit Initial width of select list限制选择列表的初始宽度
【发布时间】：2011-04-16 09:38:27
【问题描述】：

我有一个选择列表，其中一些客户为他们输入了非常长的选项，这破坏了设计。我想知道是否有办法在选择小部件上设置固定宽度，但它产生的下拉菜单仍然足够宽以显示所有选项。

【问题讨论】：

【解决方案1】：

由于您没有指定所需的浏览器支持，因此这可能是也可能不是解决方案。这适用于大多数浏览器 IE9+

select {
    width: 100%;
    max-width: 150px;
}

短而甜。展开后，select 将显示整个文本（除非超出视口！）。

【讨论】：

对于像我这样的新手，如果您将此解决方案内联，它是

【解决方案2】：

在 CSS 中添加如下内容：

select {
    border: 1px solid #838383;
    border-style: outset;
    font-weight: bold;
    color: #3F3F3F;
    max-width: 150px !important;
    overflow: hidden;
}

option {
    max-width: 120px !important;
    overflow: hidden;
}

这对我有用。请注意，锚点前面没有没有个点。

【讨论】：

【解决方案3】：

如果您拥有的列表（<select> 中的条目）是用户输入的，并且用户可以输入，比如 500 个字符，他们肯定会输入。

在这种情况下，我不会选择 <select> 列表，而是使用自定义列表构建，例如 <div>。

这并不难，你所需要的就是

包含默认值的 div 选项，
包含所有选项的隐藏 div
当用户单击默认选项时显示隐藏的 div
单击隐藏 div 中的项目（现在可见）使第一个 div 中的选定项目

也许已经有 jquery 插件了。但我不确定你是否对 jquery 持开放态度，反正我不是 jquery 专家。

我知道这比拥有select 要付出更多的努力，但我认为这是值得的。所有的 hack - 扩展 div onmouseover、onclick 等看起来不太好，可能仍然会破坏您的设计，并且根据用户可以输入的数据量，仍然无效。

在自定义列表方式中，您可以将元素包裹起来，让您完全掌控。

【讨论】：

【解决方案4】：

不确定你是否愿意使用 jQuery，但我通常使用这种方法：

http://css-tricks.com/select-cuts-off-options-in-ie-fix/

有点断断续续，但比截断内容好看

【讨论】：

【解决方案5】：

我不知道你是否可以使用 css（独立于浏览器）来做到这一点，但这里有 2 个其他解决方案：

1. 代替显示“veeeeeery looooooooooong teeeeeeeeext”，您可以显示类似“veeeeeery loooo...”的内容；

2. 使用 div 和列表构建您的选择，以便当它关闭时具有特定宽度并且当您按下箭头之类的东西以显示全宽时。（我不确定你是否明白我想说的这个......）。

【讨论】：

【解决方案6】：

See the working example here.

您只需将width 应用到您的选择框内联或CSS。它将与您指定的一样宽，但是当单击时，它将显示所有宽度的选项。

【讨论】：

好主意，但这也会在 Internet Explorer 6+ 中切断下拉菜单