Question

我的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/

由文本溢出隐藏的溢出文本：省略号使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;
}

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

2 个答案: