CSS text-overflow ellipsis middle

In this example below you will see how to do a CSS text-overflow ellipsis middle with some HTML / CSS and Javascript

This awesome code was written by mayko780, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright mayko780 ©


  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

  <meta charset="UTF-8">
  <title>CSS text-overflow ellipsis middle</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

      <link rel="stylesheet" href="css/style.css">



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



/*Downloaded from https://www.codeseek.co/mayko780/css-text-overflow-ellipsis-middle-opPgJN */
#fileName {
  position: relative;
  width: 150px;

#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*/