CSS Crop string in middle

HTML

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

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