CSS crop string in the middle

This article helps you to crop long string in middle using css ellipsis.
Here is a solution using the data-* attribute and an :after pseudo element.

CSS

#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;  
}

HTML

<div id="fileName" data-filetype="txt">
  <p>This is the big name of my file.txt</p>
</div>

JS Fiddle