Question

I have the following HTML and CSS:

<style>
 .field { display: inline-block; width: 100px; overflow: hidden; white-space: nowrap; margin-left: 15px; }
 .field:hover { overflow: visible; z-index: 100; }
</style>

<span style="display: block; white-space: nowrap;"> 
 <span class="field"> field 1 - Some long text in here that gets cut off.</span>
 <span class="field"> field 2 - Some long text in here that gets cut off.</span>
</span>

Preview: http://jsfiddle.net/RpLQk/

If you hover over field 1, the overflow text is shown, but since the background-color is transparent the text of field 2 bleeds through, and it looks terrible. I need field 1 to cover field 2 during hover.

I’ve tried setting the background-color, but the color is only applied to the original element size, not the newly displayed overflow. I’ve tried z-index: 1000 and position: relative, to no avail.

Also, I need this to work in IE 9.

Any help is appreciated.

Answer 1

The issue is that you’re trying to get the background for .field to expand further than 100px, but the width is set to 100px. Adding an inner span will allow you to expand the background with the text.

Try this:

HTML:

<div class="wrapper"> 
    <span class="field"><span>field 1 - Some long text in here that gets cut off.</span></span>
    <span class="field"><span>field 2 - Some long text in here that gets cut off.</span></span>
</div>

No reason to have <span style="display: block">, should use <div> instead.

CSS:

body { background: #ccc; }
.wrapper { white-space: nowrap; }
.wrapper .field { 
    width: 100px;
    overflow: hidden;
    display: inline-block; }
.wrapper .field:hover { 
    position: relative;    
    overflow: visible; }
.wrapper .field span { background: #fff; }

Preview: http://jsfiddle.net/Wexcode/Vm4Xg/