Html 溢出：隐藏DOM元素后面的文本

我认为我的问题很琐碎，但我无法找到理想的解决方案。我试图使用overflow:hidden样式将文本隐藏在glyphicon（包装在一个span中）后面，但是我无法让我的代码显示我想要的方式

HTML

我希望glyphicon与文件名位于同一行，并且当屏幕尺寸较小（移动设备）时，我希望溢出发生在glyphicon的边缘，而不是列表组项目的边缘

在此小提琴上：glyphicon移动到文件名下方，因此文件名和移除glyphicon不在同一行

在此小提琴上：溢出点发生在列表组图标上

如何使文件名的溢出位置出现在移除图标处

我已经尝试了几种封装DOM元素的变体，以及文件名上位置：相对、位置：绝对的不同组合，您可以查看上面fiddle的不同迭代，看看我还尝试了什么，但是我没有实现我的目标

---

如果有人问这个问题，请告诉我答案，非常感谢您的帮助

其实并不那么琐碎

我发现解决这个问题的唯一方法是使用

display:flex属性


它工作得很好，但是由于这个属性是非常新的，所以它不能在所有您目标的浏览器中工作
 非常有趣，我认为这将是微不足道的，并且很容易与标准html/css实现，无论哪种方式，这对我来说都是可行的。非常感谢。
<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>

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