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

來源

2013-03-06 Bill

這是爲會員是件好事選擇答案，以便其他人可以從工作解決方案中受益問題。我仍然不知道這是否對你有幫助。乾杯 – kingdomcreation 2013-03-06 18:06:14

是的。如果它不起作用，我們仍然可以嘗試幫助你。 – WooCaSh 2013-03-06 18:09:55

對不起，我在離開辦公室之前發佈了這個消息。我剛回來，現在正在嘗試它！ :) – Bill 2013-03-07 10:04:28

您可以添加

position: relative

到.icon類

來源

2013-03-06 16:15:48 kingdomcreation

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

來源

2013-03-06 16:21:28 WooCaSh

這沒有奏效，但@kingdomcreation的答案確實有效（位置：相對）。不管怎麼說，還是要謝謝你：） – Bill 2013-03-07 10:06:10

CSS：隱藏文本溢出的文本：省略號仍然存在

回答

相關問題