Responsive table truncate (ellipsis)

In this example below you will see how to do a Responsive table truncate (ellipsis) with some HTML / CSS and Javascript

Thumbnail
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 ©

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>Responsive table truncate (ellipsis) </title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css'>

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

  
</head>

<body>

  <div class="container">
  <table class="table">
    <tbody>
      <tr>
        <td>Column 1</td>
        <td>Column 2</td>
        <td>
            <div class="text-truncate">
              <span>
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam porta tortor vitae nisl tincidunt varius. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel ullamcorper tortor. Nullam vel turpis a augue tempor posuere vel quis nibh. Nam ultrices felis turpis, at commodo ipsum tristique non. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse in accumsan dui, finibus pharetra est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae velit eu dui rutrum pellentesque vel imperdiet sem. Morbi ut lacinia lacus, in commodo nibh. Sed cursus ante ut nunc molestie viverra.
              </span>
          </div>
        </td>
        <td>Column 4</td>
      </tr>
    </tbody>
  </table>
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/mayko780/responsive-table-truncate-ellipsis-JLKWaJ */
.text-truncate {
  display: table;
  table-layout: fixed;
  width: 100%;
  white-space: nowrap;
}
.text-truncate > * {
  display: table-cell;
  overflow: hidden;
  text-overflow: ellipsis;
}

Comments