html - 包裹在选择框中 - Firefox 的问题

Question

我有一个引导选择框，其中的选项对于选择容器的宽度来说太大了。选择已被覆盖并相应地设置样式。我已经（或想要）将选项文本包装在选择框中。它在 chrome 中看起来不错，但 FF 不包裹。看看http://bootply.com/83141

对我来说，解决方法是更改​​： text-overflow:''; 为“省略号”。Ellipsis 仍然使用 chrome 包装，但在 FF 中通过添加 ...

有没有人有任何替代方案或让 FF 像 chrome 一样翘曲？

            <div class="span4">
                <div class="styled-select caret-select">
                    <select name="tickets" id="tickets" onchange="setContractValue();">
                        <option>this is a long option that needs to wrap in the box</option>
                    </select>
                </div>
            </div>

Answer 1

您可以尝试使用 fieldset 模拟选择标记。见https://mdn.mozillademos.org/files/4563/editable_select.html

那或者您可以制作两个选项标签。一个是第一个，另一个是第一个的延续。他们都选择了相同的值。

否则看起来你必须用javascript做点什么。

Answer 2

根据研究，截至 2020 年，似乎还没有解决方案，而您在 Firefox 中添加省略号的解决方法是我发现的最好的解决方法。