CSS：用文本溢出隐藏的文本：省略号仍然存在答案

【问题标题】：CSS: text hidden with text-overflow:ellipses still existsCSS：用文本溢出隐藏的文本：省略号仍然存在
【发布时间】：2013-03-06 16:10:49
【问题描述】：

我有一个长度可变的 li，但宽度固定的 ul。我也有一些图标在里。

<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 注册光标悬停在文本后面（或文本所在位置）上方的内容。

有解决这个问题的想法吗？

干杯

【问题讨论】：

会员选择答案是一件好事，这样其他人可能会从问题的有效解决方案中受益。我仍然不知道这是否对你有帮助。干杯
是的。如果它不起作用，我们仍然可以尝试帮助您。
抱歉，我是在离开办公室之前发布的。我刚回来，现在正在尝试！ :)

标签： hover flow css-position css

【解决方案1】：

你可以添加

position: relative

到 .icon 类

【讨论】：

【解决方案2】：

只需将显示block添加到图标类：

.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;
}

【讨论】：

这不起作用，但@kingdomcreation 的答案确实有效（位置：相对）。无论如何谢谢:)