html选择下拉宽度太大 [英] html select dropdrown width is too big

问题描述

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

I searched for a fix for my problem but I can't find one, maybe I don't know how to search this in english since it's not my first language.

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

Anyway, my problem is that I am trying to use the feature from HTML and one of the options is very loooong and if I leave the without any width passed as style it will destroy the entire website. If I use width it will only show something from the and look as cut. However I saw an example that had "..." in it which I gladly use but I don't know how.

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

Just to be clear, I am looking for some help to make my look like "Long option ..." or If anyone knows a better way?

推荐答案

示例 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 将 ... 添加到比指定宽度长的文本中.

DEMO - Adding ... to selected value only

Change the width to what ever fits your situation best. Applying text-overflow: ellipsis adds the ... to the text which is longer than the specified width.

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

This style is only applied to the selected value but still displays the options in full when the dropdown is clicked.

这篇关于html选择下拉宽度太大的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！