css overflow visible and z-index

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.

Wex · Accepted Answer · 2011-12-30 22:35:52Z

4

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/

answered Dec 30, 2011 at 22:35

Wex

15.7k10 gold badges68 silver badges108 bronze badges

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

1 Comment

izzy Over a year ago

You nailed it Wex. Thanks a lot!

Collectives™ on Stack Overflow

css overflow visible and z-index

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