CODEWITHSUNDEEP
htmlcss
AaronLS
AaronLS

Reputation: 38365

Making div background opaque so that overflow text can be read?

The following code shows how you can have text truncated by a div with overflow:hidden and then show all text on mouse over. The problem is if there is other text beside or below the div, it is super imposed on the text below. Thus it is difficult to read. I would like the background of the div to be opaque so that the text is easier to read. Resizing the div is not an option cause that will cause the layout to "jump".

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css"> 
div.test
{
width:12em; 
overflow:hidden; 
border:1px solid #000000;
height:20px;
background-color:white
}

div.test:hover
{
text-overflow:inherit;
overflow:visible;
background-color:white
}
</style>
</head>
<body>

<p>Hover over the two divs below, to see the entire text.</p>

<div class="test" style="text-overflow:ellipsis;">This is some long text that will not fit in the box</div>
<div class="test" style="text-overflow:clip;">This is some long text that will not fit in the box</div>

</body>
</html>

Upvotes: 1

Views: 1507

Answers (2)

AaronLS
AaronLS

Reputation: 38365

Found this solution. (Edit: Fixed the issue with elements resizing/jumping on mouseover. Have updated the code)

http://jsfiddle.net/Vm4Xg/4/

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

<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>​

Upvotes: 2

Zensar
Zensar

Reputation: 817

I know this might not be exactly what you are looking for, but can you set each div as "position:absolute", set their positions, and then add a "z-index" to the "div.test:hover" class? It's not the most elegant (I'm not a fan of manually positioning elements), but it should do what you are describing (ie... no elements "jumping").

Upvotes: 1

Related Questions