使用text-overflow:省略号隐藏的CSS: text仍然存在

Question

我有一个不同长度的li的ul，但一个固定的宽度。我也有一些图标在li.

<ul>
    <li><span class="icon"></span>Long Text with text-overflow:ellipsis</li>
    <li><span class="icon"></span>Short text</li>
    <li><span class="icon"></span>Long Text with text-overflow:ellipsis</li>
</ul>

li的text-overflow属性设置为text-overflow:ellipsis;。但是，剪切的文本将会溢出块元素后面它(.icon)从注册光标悬停

我的CSS:

.icon {
    height:18px;
    width:18px;
    float:right; /*there is a good reason for this, don't complain ;) */
    cursor:pointer;
    background:url(icons.png);
    background-position:-72px -72px;
}
.icon:hover {
    background-position:-90px -72px;
}
li {
    text-overflow:ellipsis;
    height:20px;
    overflow:hidden;
    white-space:nowrap;
    list-style-type:none;
    width:150px;
}

查看我的jsfiddle，它比我解释得好得多:p

http://jsfiddle.net/eXXTG/

text-overflow:ellipses隐藏的溢出文本阻止dom将光标悬停在文本后面(或文本应该在的地方)的上方。

有什么建议吗?

Cheeers

Answer 1

可以添加

position: relative 

到。icon类

Answer 2

只需将显示块添加到图标类:

.icon {
    height:18px;
    width:18px;
    background:url(http://www.darkroomart.com/dewolfe/css/images/dw-icons.png);
    float:right;
    /*there is a good reason for this, don't complain ;) */
    cursor:pointer;
    background-position:-72px -72px;
    display: block;
}