overflow:hidden hide text behind DOM element

Question

I assume my question is trivial, but I am unable to find an ideal solution. I'm trying to use the overflow:hidden style to hide text behind a glyphicon (wrapped in a span), however I cannot get my code to display how I would like.

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

I would like the glyphicon to be on the same line as the fileName, and when the screen size is small (mobile device), I would like the overflow to happen on the edge of the glyphicon, not the edge of the list-group-item.

On this fiddle: http://jsfiddle.net/mkabatek/7H4Cv/11/ the glyphicon moves below the fileName, so the fileName and remove glyphicon are not on the same line

On this fiddle: http://jsfiddle.net/mkabatek/7H4Cv/10/ the overflow point happens on the list-group-icon.

How can I make the overflow position for fileName occur at the remove glyphicon?

I have tried several variations of encapsulating the DOM elements, as well as different combinations of position:relative, position:absolute on fileName, you can look at the different iterations of the above fiddle to see what else I have tried, however I have not been able to achieve my goal.

If this has been asked, please point me towards the answer, any help is greatly appreciated!

LudovicL · Accepted Answer · 2014-02-17 06:18:51Z

2

Not so trivial actually !

The only solution I found to solve this problem is to use the display:flex; property.

Here is a JSFiddle

It works well, but since this property is quite new, it could not work in all the browsers you target. Check here the supported browsers.

answered Feb 17, 2014 at 6:18

LudovicL

5481 gold badge4 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

mkabatek Over a year ago

Very interesting I thought this would be trivial, and easily possible with standard html/css, either way this works for me. Thank you.

Collectives™ on Stack Overflow

overflow:hidden hide text behind DOM element

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related