Question

我认为我的问题很简单，但我无法找到理想的解决方案。我正在尝试使用overflow：隐藏样式来隐藏一个glyphicon后面的文本（包裹在一个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的边缘，而不是列表的边缘-group项目。

在这个小提琴上：http://jsfiddle.net/mkabatek/7H4Cv/11/ glyphicon移动到fileName下方，因此fileName和remove glyphicon不在同一行上

在这个小提琴上：http://jsfiddle.net/mkabatek/7H4Cv/10/溢出点发生在list-group-icon。

如何在remove glyphicon上发生fileName的溢出位置？

我已经尝试了几种封装DOM元素的变体，以及position：relative，position：absolute on fileName的不同组合，你可以看看上面小提琴的不同迭代，看看我尝试了什么，不过我无法实现目标。

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

Answer 1

实际上并非如此微不足道！

我找到解决此问题的唯一解决方案是使用display:flex;属性。

Here is a JSFiddle

效果很好，但由于此属性很新，因此无法在您定位的所有浏览器中使用。 Check here the supported browsers.

overflow：隐藏在DOM元素后面的隐藏文本

1 个答案: