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!
