html - 溢出 :hidden hide text behind DOM element

Question

我认为我的问题很简单，但我找不到理想的解决方案。我正在尝试使用 overflow:hidden 样式将文本隐藏在字形图标后面(包裹在一个跨度中)，但是我无法让我的代码显示我想要的方式。

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

我希望字形与文件名在同一行，当屏幕尺寸较小时(移动设备)，我希望溢出发生在字形的边缘，而不是列表的边缘-组元素。

在这个 fiddle 上:http://jsfiddle.net/mkabatek/7H4Cv/11/字形移动到文件名下方，因此文件名和删除字形不在同一行上

在这个 fiddle 上:http://jsfiddle.net/mkabatek/7H4Cv/10/溢出点发生在列表组图标上。

如何使 fileName 的溢出位置出现在删除字形上？

我尝试了几种封装 DOM 元素的变体，以及 position:relative、position:absolute 在 fileName 上的不同组合，您可以查看上述 fiddle 的不同迭代，看看我还尝试了什么，但是我未能实现我的目标。

如果有人问过这个问题，请指出我的答案，非常感谢任何帮助!

Answer 1

其实没那么简单!

我发现解决这个问题的唯一方法是使用 display:flex; 属性。

Here is a JSFiddle

它工作得很好，但由于这个属性是相当新的，它不能在你的目标浏览器中工作。 Check here the supported browsers.