21

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

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

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

4

6 回答 6

33

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

演示- 仅将 ... 添加到选定的值

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

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

于 2012-09-11T14:56:09.820 回答
10

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

$(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>

这是一个小提琴

于 2012-09-11T14:11:52.293 回答
3

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

select { width: 7em }

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

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

于 2012-09-11T14:50:31.073 回答
3

You could solve this using jQuery and reading this article .

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"));
  });
于 2012-09-11T13:57:44.123 回答
1

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

您可以使用这些语言中的任何一种来缩短字符串（最后使用 ...）。在这里你可以找到如何使用 js： javascript 缩短字符串而不剪切单词

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

于 2012-09-11T13:56:55.937 回答
-1

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

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


  [1]: http://jsfiddle.net/xpvt214o/996293/
于 2018-12-13T10:38:50.343 回答