Marusya's School Notes

Overflow Hover

You can display the overflowed content when hovering over the element:

HTML file:	Displayed by browser:
<style> div.test { white-space: nowrap; width: 200px; overflow: hidden; border: 1px solid #000000; } div.test:hover { text-overflow: inherit; overflow: visible; } </style> <body> <h3>Hover over the two elements below, to see the entire text.</h3> <p>This is the ellipsis version of overflow text.</p> <div class="test" style="text-overflow:ellipsis;">This is some long text that will not fit in the box</div> <br /> <p>This is the clipped version of overflow text.</p> <div class="test" style="text-overflow:clip;">This is some long text that will not fit in the box</div> </body>	Hover over the two elements below, to see the entire text. This is the ellipsis version of overflow text. This is some long text that will not fit in the box This is the clipped version of overflow text. This is some long text that will not fit in the box

HTML file:

Displayed by browser:

<body>
<h3>Hover over the two elements below, to see the entire text.</h3>
<p>This is the ellipsis version of overflow text.</p>
<div class="test" style="text-overflow:ellipsis;">This is some long text that will not fit in the box</div>
<br />
<p>This is the clipped version of overflow text.</p>
<div class="test" style="text-overflow:clip;">This is some long text that will not fit in the box</div>
</body>

Hover over the two elements below, to see the entire text.

This is the ellipsis version of overflow text.

This is some long text that will not fit in the box

This is the clipped version of overflow text.

This is some long text that will not fit in the box