Question

我搜索了我的问题的修复程序，但我找不到一个，也许我不知道如何用英语搜索，因为它不是我的第一语言。

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

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

Answer 1

示例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会将...添加到超过指定宽度的文本中。

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

Answer 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

Answer 3

你可以使用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"));
  });

Answer 4

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

select { width: 7em }

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

如果某个选项非常很长，那么无论如何你都有可用性问题，你应该考虑缩短它或使用不同的控件，比如一组单选按钮或复选框。

Answer 5

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

您可以使用其中任何一种语言来缩短字符串（最后使用...）。在这里你可以找到如何用js做到这一点： javascript shorten string without cutting words

如果您更具体并展示一些代码，我可以帮助您在特定情况下完成此任务。

Answer 6

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

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


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

html选择下拉宽度太大

6 个答案:

DEMO - 仅将<添加到选定值

Here's a fiddle