html - 短选择字段上的截断文本

Question

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

本质上，我有一个非常窄的选择框和大量的填充。在 Chrome(左)中，如果您的文本不适合菜单按钮之前的区域，您的文本将被截断。

在这种情况下，这可以通过删除右侧填充来解决。但是，如果我这样做，那么我最终会在 IE 中将菜单按钮压扁在字段的边缘(我真的不喜欢这个，因为它很丑)。

有没有人有不包含 hack-y 变通或替代控制的解决方案？

它只是一个普通的选择框，上面有一些填充。

编辑: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

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

或者您还可以做的是稍微更改字体大小以适合。例如，在您的 select 样式中，添加 font-size:12px; 这应该使整个单词可见且美观。希望这对您有所帮助!