Home/ Questions/Q 7619723
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-31T03:45:33+00:00

The following code shows how you can have text truncated by a div with

  • 0

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

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

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