<div id="fileName" data-filetype="txt"> <p>This is the big name of my file.txt</p> </div>
#fileName { position: relative; width: 100px; } #fileName p { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } #fileName:after { content: attr(data-filetype); position: absolute; left: 100%; top: 0; } /*Show on hover*/ #fileName:hover { width: auto } #fileName:hover:after { display: none; }