How to Limit the Text Length to One Line with CSS

Solutions with the CSS text-overflow property

If you want to limit the text length to one line, you can clip the line, display an ellipsis or a custom string. All these can be done with the CSS text-overflow property, which determines how the overflowed content must be signalled to the user.

Here, you will find all the three above-mentioned methods of limiting the text length to one line.

Example of limiting the text length to one line by clipping the line:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: clip;
      }
    </style>
  </head>
  <body>
    <div>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </div>
  </body>
</html>

Result

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
The white-space property with the “nowrap” value and the overflow property with the “hidden” value are required to be used with the text-overflow property.

Example of limiting the text length to one line by adding an ellipsis:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .text {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    </style>
  </head>
  <body>
    <div class="text">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </div>
  </body>
</html>
The <string> value of the text-overflow property used in the next example adds strings at the end of the line only in Firefox.

Example of limiting the text length to one line by adding strings:

<!DOCTYPE html>
<html>
  <head>
    <title> Title of the document</title>
    <style>
      div.text {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: "----";
      }
    </style>
  </head>
  <body>
    <div class="text">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </div>
  </body>
</html>