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

问题描述：

我有一个具有不同长度li的ul，但是具有固定的宽度。我在里面也有一些图标。CSS：隐藏文本溢出的文本：省略号仍然存在

<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>

李的有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/

溢出的文字隐藏通过短信溢出：省略号停止日将注册光标悬停在文本背后的东西上（或文本所在的位置）。

修复此问题的任何想法？

Cheeers

这是为会员是件好事选择答案，以便其他人可以从工作解决方案中受益问题。我仍然不知道这是否对你有帮助。干杯 – kingdomcreation 2013-03-06 18:06:14

是的。如果它不起作用，我们仍然可以尝试帮助你。 – WooCaSh 2013-03-06 18:09:55

对不起，我在离开办公室之前发布了这个消息。我刚回来，现在正在尝试它！ :) – Bill 2013-03-07 10:04:28

答

您可以添加

position: relative

到.icon类

http://jsfiddle.net/eXXTG/2/ – kingdomcreation 2013-03-06 16:16:12

希望它能解决您的问题。 – kingdomcreation 2013-03-06 16:20:15

完美，感谢：D – Bill 2013-03-07 10:07:10

答

显示块只需添加到图标类：

.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的答案确实有效（位置：相对）。不管怎么说，还是要谢谢你：） – Bill 2013-03-07 10:06:10

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

相关推荐