我认为我的问题很琐碎，但我找不到理想的解决方案。我正在尝试使用overflow：hidden样式将文字隐藏在一个字形图标（包裹在一个span中）后，但是我无法获取代码来显示我想要的样子。
的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与fileName位于同一行，并且当屏幕尺寸较小（移动设备）时，我希望溢出发生在glyphicon的边缘，而不是list-group-的边缘项目。
在这个小提琴上：http : //jsfiddle.net/mkabatek/7H4Cv/11/ glyphicon移动到fileName下方，因此fileName和remove glyphicon不在同一行
关于这个小提琴：http : //jsfiddle.net/mkabatek/7H4Cv/10/溢出点发生在list-group-icon上。
如何使fileName的溢出位置出现在remove glyphicon上？
我尝试了几种封装DOM元素的变体，以及fileName上position：relative，position：absolute的不同组合，您可以查看上面的小提琴的不同迭代，以查看我还尝试了什么，但是我没有能够实现我的目标。
如果有人提出这个问题，请指出答案，我们将不胜感激！
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句