Limit Text Inside Div and Display OnHover

I'm trying to limit the text inside div using height and overflow:hidden, but then I want to display the full text on hover, but the hover section is not being displayed or being cut due to the overflow:hidden.

How can I fix it?

http://jsfiddle.net/2e7mqruf/

<div  class="tooltip-pr" style="max-width: 220px;">SOME LONG TEXT TO DISPLAY ON HOVER<span class="tooltiptext-pr">SOME LONG TEXT TO DISPLAY ON HOVER</span></div>.tooltip-pr {position: relative;display: inline-block;height: 20px;overflow: hidden;border: 1px solid;}.tooltip-pr .tooltiptext-pr {visibility: hidden;background-color: black;color: #fff;position: absolute;}.tooltip-pr:hover .tooltiptext-pr {visibility: visible;}