How to Display Ellipsis in the <span> Element Having Hidden Overflow

Solution with the CSS text-overflow property

To add an ellipsis in the HTML <span> element having the CSS overflow property set to “hidden”, you need to add the text-overflow property. Use its “ellipsis” value, which will add dots at the end of the content within the <span>.

Watch a course CSS - The Complete Guide (incl. Flexbox, Grid & Sass)

Example of displaying ellipsis in the <span> tag with the overflow property:

<!DOCTYPE html>
<html>
  <head>
    <style>
      span {
        display: inline-block;
        width: 200px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        color: green;
      }
    </style>
  </head>
  <body>
    <span>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </span>
  </body>
</html>

Result

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

In our example, we set the display property for the <span> element to “inline-block”. The width specifies where the ellipsis should be. Note also, that we used the white-space property with the “nowrap” value not to allow the content wrap to the next line.

Example of displaying ellipsis in the <span> tag at the end of the second line:

<!DOCTYPE html>
<html>
  <head>
    <style>
      span {
        display: inline-block;
        border: 1px solid #cccccc;
        padding: 9px;
        width: 150px;
        height: 45px;
        -webkit-line-clamp: 2;
        display: -webkit-box;
        line-height: 1.65;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    </style>
  </head>
  <body>
    <span>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </span>
  </body>
</html>