Question

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

Answer 1

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

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

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

Answer 2

See the working example here.

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

Answer 3

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

1.而不是显示“veeeeery looooooooooong teeeeeeeeext”，你可以显示类似“veeeeery loooo ......”的内容;

2.使用div和列表构建你的选择，这样当它关闭时具有特定的宽度，当你按下像箭头一样的东西来显示全宽。（我不确定你理解我想用这个说些什么......）。

Answer 4

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

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

有点不稳定，但看起来比切断内容更好

Answer 5

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

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

这并不难，只需要

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

也许已经有jquery插件了。但我不确定你是否对jquery持开放态度，无论如何我都不是jquery专家。

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

在自定义列表方法中，您可以包装元素，以便您完全控制。

Answer 6

将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;
}

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

限制选择列表的初始宽度

6 个答案: