CODEWITHSUNDEEP
htmlcss
mkabatek
mkabatek

Reputation: 1276

overflow:hidden hide text behind DOM element

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!

Upvotes: 3

Views: 172

Answers (1)

LudovicL
LudovicL

Reputation: 548

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.

Upvotes: 2

Related Questions