当前位置：文江博客话题详情

限制选择列表的初始宽度

发布于 2024-09-24 12:38:31 字数 91 浏览 3 评论 0原文

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

赠佳期 2024-10-01 12:38:31

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

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

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

Since you don't specify what browser support you need, this may or may not be a solution. This works in most browsers IE9+

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

Short and sweet. When expanded, the select will display the whole text (unless it exceeds the viewport!).

回复收藏 0 原文

浊酒尽余欢 2024-10-01 12:38:31

请参阅此处的工作示例。

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

回复收藏 0 原文

好菇凉咱不稀罕他 2024-10-01 12:38:31

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

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

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

回复收藏 0 原文

不…忘初心 2024-10-01 12:38:31

如果您拥有的列表（

在这种情况下，我不会选择

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

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

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

我知道这比选择要付出更多的努力，但我认为这是值得的。所有的技巧 - 在鼠标悬停时展开 div、onclick 等看起来不太好，可能仍然会破坏您的设计，并且根据用户可以输入的数据量，仍然不会有效。

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

回复收藏 0 原文

安人多梦 2024-10-01 12:38:31

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

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

Add to the CSS something like this:

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

This works for me. Note there are no dots in front of the anchors.

回复收藏 0 原文