html 选择下拉菜单宽度太大

Posted 2023-03-06

【中文标题】html 选择下拉菜单宽度太大

【英文标题】：html select dropdrown width is too big

【发布时间】：2012-09-04 11:29:46

【问题描述】：

我搜索了解决我的问题的方法，但找不到，也许我不知道如何用英语搜索它，因为它不是我的第一语言。

无论如何，我的问题是我正在尝试使用 html 中的功能，其中一个选项非常冗长，如果我将没有任何宽度作为样式传递，它将破坏整个网站。如果我使用宽度，它只会显示一些东西，看起来像切割。但是，我看到了一个包含“...”的示例，我很乐意使用它，但我不知道如何使用。

为了清楚起见，我正在寻求一些帮助，让我看起来像“多头期权......” 或者如果有人知道更好的方法？

【问题讨论】：

你能显示代码吗？ HTML、php、JS？我们无法知道您是如何输出选择元素的。

请在 js fiddle 中添加你的代码。

这里是：jsfiddle.net/zbhMz

【参考方案1】：

仅使用 css 更改/更改选择菜单是不可能的。我添加了一个使用 jquery 的小演示来模拟解决方案的问题。

[Truncating or showing ellipses for Long option value][1]


  [1]: http://jsfiddle.net/xpvt214o/996293/

【讨论】：

查看接受的纯 CSS 解决方案的答案

【参考方案2】：

如果您正在寻找一个非常简单的解决方案，就像您描述的那样（附加 ...），那么这样的东西应该适合您：-

$(document).ready(function() 
    var maxLength = 15;
    $('#example > option').text(function(i, text) 
        if (text.length > maxLength) 
            return text.substr(0, maxLength) + '...';
        
    );
);

这只是遍历每个option 并检查其文本长度。如果它大于maxLength，它将被缩短到与maxLength 相同的长度，并且... 将被附加到它上面。

下面是一些与之配套的示例标记：-

<select id="example">
    <option value="1">Short</option>
    <option value="2">Oh dear, this option has really long text :(</option>
</select>

Here's a fiddle

【讨论】：

是的！谢谢，但是当我单击下拉菜单时，我想查看整个选项。这可能吗？

@SarahMcLachlane：你原来的帖子不是很清楚，你说Long option ...，但是你想看到整个选项？你的意思是你只想截断选定的值而不是所有的选项？在那种情况下，您是否尝试过 CSS 来设置选择的 with？ selectwidth: 100px;。这会改变下拉菜单的宽度，但在单击下拉菜单时会完全扩展选项。

我知道，但我想将“...”添加到截断的 long 值中，当我单击 以查看我希望能够看到整个文本的选项时。

@SarahMcLachlane：我根据您的回复添加了答案。让我知道这是否是您需要的。

【参考方案3】：

示例 HTML：

<select id="myOptions">
    <option value="1"><span>Item 1</span></option>
    <option value="2">Item 2</option>
    <option value="3">Item 3 which has very very very very very long text</option>
    <option value="4">Item 4</option>
</select>

示例 CSS：

select
    width: 100px;
    text-overflow: ellipsis;

DEMO - 仅将 ... 添加到选定值

将宽度更改为最适合您的情况。应用text-overflow: ellipsis 会将... 添加到比指定宽度更长的文本中。

此样式仅应用于所选值，但在单击下拉菜单时仍会完整显示选项。

【讨论】：

@DilipRajkumar：我没有 IE8，我在 IE9 上，当切换到 IE8 浏览器模式时，jsFiddle 在 IE9 上都搞砸了。我将 HTML 和 CSS 添加到一个新的空网页中，并在 IE9 中使用浏览器模式和 IE8 中的文档模式对其进行了测试。样式始终正确应用。所以我假设在 IE8 兼容模式下运行的 IE9 与 IE8 不同。我什至尝试了 HTML 4.01 和 HTML 5 DOCTYPEs，以防万一，但没有。在 IE8 中运行时，您能否分享指向某个站点的链接，我们可以看到问题吗？

嗨@FrançoisWahl 感谢您的回答。我现在没有实时链接。一旦应用程序投入生产，我会提供。 CSS 技巧不适用于 IE 8 及更低版本。但是它在其他浏览器中运行良好。我正在尝试找到一些 jquery 库来解决这个问题。

已在 Chrome 81/Mac 上测试，但无法正常工作。是否修剪选项或添加省略号

【参考方案4】：

如果您在select 元素上设置宽度，例如

select  width: 7em 

下拉列表仍会以其自然宽度显示。

如果某个选项非常很长，那么无论如何您都会遇到可用性问题，您应该考虑将其缩短或使用不同的控件，例如一组单选按钮或复选框。

【讨论】：

我选择了所有国家/地区，其中一些可能很长，将宽度设置为百分比对我的最大宽度响应式设计非常有效，因此它不会变得很拉伸大屏幕。

【参考方案5】：

您可以使用 jQuery 并阅读 this 文章来解决这个问题。

var el;

$("select")
  .each(function() 
    el = $(this);
    el.data("origWidth", el.outerWidth()) // IE 8 can haz padding
  )
  .mouseenter(function()
    $(this).css("width", "auto");
  )
  .bind("blur change", function()
    el = $(this);
    el.css("width", el.data("origWidth"));
  );

【参考方案6】：

这取决于您如何将选项添加到选择中 - 它是使用 PHP/Python/等服务器端语言生成的吗？或者是一些 JS 或者它的静态 HTML？

您可以使用这些语言中的任何一种来缩短字符串（最后使用 ...）。在这里您可以找到如何使用 js 进行操作： javascript shorten string without cutting words

如果您更具体并显示一些代码，我可以在您的具体情况下帮助您完成此操作。