短选择字段上的截断文本

Question

我想知道是否有人在短选择字段中有截断文本的解决方案。

基本上我有一个非常狭窄的选择框，有大量的填充。在Chrome（左侧）中，如果您的文字不适合菜单按钮之前的区域，则会截断您的文字。

在这种情况下，可以通过删除右边距来修复此问题。然而，如果我这样做，那么我最终会在IE的字段边缘上挤压菜单按钮（我真的不喜欢这样，因为它很难看）。

有没有人有一个解决方案，不包括黑客工作或替代控制？

它只是一个香草选择框，上面有一些填充。

编辑：jsfiddle：http://jsfiddle.net/jgA8K/2/

示例Html：

<select>
    <option>AM</option>
</select>

示例Css：

/** Pretend there is a CSS RESET here **/
select
{
    background: #fff;
    border: 1px solid #444;
    margin: 10px;
    padding: 13px;
    width: 70px;
}

Answer 1

发生的事情是你将选择框定义为70px宽。这意味着填充必须遵守规则。为了使填充为13px，宽度为70px，需要CSS将实际选择箭头压缩到较小的空间以允许两个规则。我建议将填充更改为10px或使框更大。

或者你还能做些什么是稍微改变字体大小以适应。例如，在select样式中，添加font-size:12px;，这样可以使整个单词看起来很漂亮。希望这有帮助！