Text Background Overflow

Question

I applied the background color to the links in my list of countries. In general, this works well:

However, for countries with a longer name, this does not work very well.

I try to make yellow color overflow everything and show the full name of the country.

HTML:

<div class="flagList"> <div class="flagColumn"> ... </div> <div class="flagColumn"> ... </div> <div class="flagColumn"> ... </div> ... </div> 

CSS

 .flagColumn { width: 33%; float: left; border:0px solid; height:1.6em; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; z-index: 1; position:relative; } .flagColumn:hover { overflow:visible; z-index: 2; position:relative; display: inline; background-color:yellow; } 

Answer 1

You can do this by wrapping the contents of .flagColumn in an optional element by setting it to display: inline-block; and instead setting the background to it:

 .flagColumn { float: left; height: 1.6em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 33%; z-index: 1; } .flagColumn:hover { overflow: visible; position: relative; z-index: 2; } .flagColumn:hover span { background-color: yellow; display: inline-block; height: 100%; } 

 <div class="flagList"> <div class="flagColumn"><span>This is test text!</span></div> <div class="flagColumn"><span>This is a lot longer test text! This is a lot longer test text!</span></div> <div class="flagColumn"><span>This is a lot longer test text! This is a lot longer test text!</span></div> </div> 

JS Fiddle: http://jsfiddle.net/hL9qfuvb/1/