esconder texto grande e ao passar mouse mostrar

Gente
Eu tenho uma tag <p></p> que retorna do banco de dados o nome de um vídeo, só que alguns nomes são muito grandes e acabam estragando o visual do site. Eu queria saber se tem como encurtar esse nome e quando a pessoa passar o mouse em cima ele ir aparecendo.

Exemplo:

tenho o nome "Britney Spears - Megamix (2016 Billboard Music Awards Performance)"
por ser muito grande, eu queria que exibisse "Britney Spears - Megamix (20...":

/applications/core/interface/imageproxy/imageproxy.php?img=http://i.imgur.com/EcEi2mQ.png&key=a381994b650ea051248b8a2e83013f153e6d4a4dd5f42f7f898b80379dc993e4" alt="EcEi2mQ.png" />

e quando a pessoa parasse o mouse em cima do nome acontecesse isso:

/applications/core/interface/imageproxy/imageproxy.php?img=http://i.imgur.com/iZDGd6X.gif&key=033b63ca18a4a3406b35bd79bb4cb39791aeece4fbb6e79a3d4cffcfd4781b88" alt="iZDGd6X.gif" />

(OBS: Imagens trabalhadas no photoshop)

É possivel fazer com jquery? Obrigado