如何仅使用 CSS 截断选择框中的文本答案

【问题标题】：How to truncate text in select box using CSS only如何仅使用 CSS 截断选择框中的文本
【发布时间】：2014-11-14 20:30:04
【问题描述】：

我已经尝试了一段时间，但现在两天没有成功。

我需要仅使用 CSS 截断/隐藏中间选择框中的文本。字段的其余部分（右侧）应保持空白/白色，背景图像应位于右侧的最后。我尝试过的解决方案的问题是选择框的宽度需要更改，在这种情况下，宽度需要保持不变，以便将背景箭头保持在当前位置。像这样的：

也许有人会有一个好主意（JavaScript 不是一个可能的选项）：

这里的 HTML：

<div class="dropdown">
    <select>
       <option value="">Some Text</option>
       <option value="">Some More Text2</option>
       <option value="">Some More More More Longer Text</option>
    </select>                                
</div>

还有这里的 CSS：

.dropdown{
    width:150px;
    border: 1px solid #cfcfcf;
    height: auto;
    border-radius: 5px;
    padding:3px 4px 4px;
    position: relative;
    z-index: 0;
    overflow:hidden;
    }

.dropdown select{
    border: none;
    background-color: transparent;
    outline: none;
    padding: 1px 0 0 5px;
    width:165%;
    background: url(http://i57.tinypic.com/nnmgpy_th.png) no-repeat right;
background-position: 55%;
    }

这里的JSFiddle：http://jsfiddle.net/pazzesco/r6c9zcpc/7/

【问题讨论】：

标签： css drop-down-menu truncate

【解决方案1】：

使用一点 CSS3 来实现这一点将是您现在和未来的最佳选择。

这是一个显示不同技术的小提琴，仍然使用你的箭头：

http://jsfiddle.net/plastclens/16Ljd8s8/2/

/* this places an arbitrary element inside the dropdown but before it's children elements */
/* We use it to cover half the select box as well as display the custom arrow */
.dropdown:before {
    height:29px;
    width:75px;
    display:block;
    content:'';
    position:absolute;
    top:0;
    right:3px;
    background: url(http://i57.tinypic.com/nnmgpy_th.png) #fff no-repeat right;
     pointer-events:none;
}

一个重要但被忽视的部分是pointer-events:none; 行。它让对这个“覆盖”的点击穿过它并进入选择。

这是无图像方法的另一个不错的资源：@987654322@ 你可能需要稍微调整一下，但你会明白的

【讨论】：

谢谢你！这正是我所需要的。关于pointer-events:none; 的好点。唯一的问题是 IE10 或更低版本不支持它。再次感谢！

【解决方案2】：

样式下拉菜单有时有点棘手。您可以在选择中添加一些右填充以强制元素的文本在您的背景“内部”停止：

.dropdown select{
    border: none;
    background-color: transparent;
    outline: none;
    padding: 1px 0 0 5px;
    width:165%;
    background: url(http://i57.tinypic.com/nnmgpy_th.png) no-repeat right;
    background-position: 55%;
    padding-right: 80%;
}

JSFiddle

【讨论】：