html – 在CSS问题中设置样式

我正在使用纯CSS来设计<选择>下拉框.使用下面的代码,我可以通过一次打嗝来执行此操作：当选项上的文本变得太宽时,它不会在下拉箭头的背景图像之前切断.

当文字太长时：

我想要完成的是在下拉箭头图像之前切断文本,使它们不重叠.但是,我仍然希望在下拉列表展开时显示全文：

这是代码：

Meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    display: block;
            width: 218px;
            height: 34px;
            overflow: hidden;
            position:relative;
            display: inline-block;
        }

        .selectButtonDiv {
            width: 16px;
            height: 16px;
            z-index: 99;
            position: absolute;
            left: 190px;
            top: 9px;
            display: inline-block;
            background: url("stream_7B0046.png") no-repeat -96px #FFF;
        }       
    

有关如何在显示折叠下拉框时剪切文本但在展开时仍显示完整文本的任何想法.所有这一切,同时仍然纯粹在CSS中.谢谢！

最佳答案

我的第一个建议是将选择范围扩大到足以说明你最大的字符数.我确定你已经想到了这个并且它不可用.

我的第二个建议是添加Javascript,特别是jQuery DD,用可以更容易定型的定义列表替换选择选项. https://github.com/HenrikJoreteg/jquery.dd