溢出：隱藏DOM元素後面的文本

我假設我的問題很簡單，但我無法找到理想的解決方案。我正在嘗試使用overflow：hidden style來隱藏文本後面的文本（包含在span中），但是我無法讓我的代碼顯示我想要的內容。溢出：隱藏DOM元素後面的文本

HTML

<ul class='list-group'> 
<li class='list-group-item'> 
    <span class='fileName'> 
    This_is_my_really_long_file_name_it_just_keeps_going.txt 
    </span> 
    <span style = 'float:right'>  
    <a href="#"> 
    <span class='glyphicon glyphicon-remove'></span> 
    </a> 
    </span> 
</li>  
</ul>

CSS

.list-group-item{ 
position:relative; 
overflow:hidden; 
text-overflow: ellipsis; 
white-space: nowrap;  
}

我想glyphicon是在同一行作爲文件名，並且當屏幕尺寸小（移動設備），我想溢出發生在圖形的邊緣，而不是列表組的項目的邊緣。

在此琴：http://jsfiddle.net/mkabatek/7H4Cv/11/的glyphicon移動的文件名以下，因此實際文件並刪除glyphicon不在同一直線上

在此琴：http://jsfiddle.net/mkabatek/7H4Cv/10/溢出點發生在列表中組圖標。

如何使文件名的溢出位置出現在刪除圖形？

我已經嘗試過幾種封裝DOM元素的變體，以及位置的不同組合：relative，position：fileName上的絕對位置，你可以看看上面提到的不同迭代，看看我還試過了什麼，但是我一直無法實現我的目標。

如果有人問到這個問題，請指點我的答案，任何幫助將不勝感激！

來源

2014-02-17 mkabatek

實際上並非如此微不足道！

我發現解決此問題的唯一解決方案是使用display:flex;屬性。

Here is a JSFiddle

它運作良好，但由於該屬性是相當新的，它不能在所有您所指定的瀏覽器。 Check here the supported browsers.

來源

2014-02-17 06:18:51 LudovicL

非常有趣我認爲這將是微不足道的，並且很容易使用標準的html/css，這兩種方法都適用於我。謝謝。 – mkabatek

溢出：隱藏DOM元素後面的文本

回答

相關問題