How to set Max Character length in CSS [5 Ways]

# How to set Max Character length in CSS

To set max character length in CSS:

Set the max-width CSS property on the element to N ch.
Set the overflow CSS property to hidden.
Optionally set text-overflow to ellipsis to display an ellipsis.
Set white-space to nowrap to collapse the whitespace and suppress line breaks.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />

    <style>
      p {
        max-width: 15ch;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    </style>
  </head>

  <body>
    <p>bobbyhadz.com</p>

    <p>This is a very long sentence.</p>
  </body>
</html>

set max characters length with ellipsis

The code for this article is available on GitHub

The example sets the maximum character length of the p element to ~15 characters.

The ch relative unit represents the advance measure of the glyph 0 in the element's font.

index.html

Copied!
<style>
  p {
    max-width: 15ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
</style>

If it is impossible to determine the measure of the 0 glyph, it is assumed to be 0.5em wide by 1em tall.

We also set the overflow property to hidden.

When overflow is set to hidden, the overflowing content is clipped at the element's padding box and the clipped content is not visible.

The text-overflow property can be set to ellipsis to display an ellipsis ... that represents the clipped text.

If you don't want to display an ellipsis, remove the property.

index.html

Copied!
<style>
  p {
    max-width: 15ch;
    overflow: hidden;
    white-space: nowrap;
  }
</style>

set max character limit without ellipsis

The code for this article is available on GitHub

When the white-space CSS property is set to nowrap:

Sequences of whitespace are collapsed.
Line breaks (text wrapping) are suppressed.

# Setting the `max-width` property to N pixels

You can also set the max-width of the element to N pixels to truncate the text.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />

    <style>
      p {
        max-width: 100px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    </style>
  </head>

  <body>
    <p>bobbyhadz.com</p>

    <p>This is a very long sentence.</p>
  </body>
</html>

set max width to n pixels to truncate text

The code for this article is available on GitHub

The example sets the max-width CSS property on all p elements to 100px.

Note that the width of the ellipsis is also included in the 100px.

If you want to remove the ellipsis, you can remove the text-overflow property, however, that wouldn't look good because a letter might be cut off.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />

    <style>
      body {
        margin: 100px;
      }

      p {
        max-width: 100px;
        overflow: hidden;
        white-space: nowrap;
      }
    </style>
  </head>

  <body>
    <p>bobbyhadz.com</p>

    <p>This is a very long sentence.</p>
  </body>
</html>

set max width in pixels without ellipsis

The code for this article is available on GitHub

# How to set a Max Character length in CSS using grid

You can also use CSS grid to set a max character length in CSS.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />

    <style>
      .container {
        display: grid;
        grid-template-columns: 1fr 15ch 1fr;
      }

      .paragraph {
        grid-column: 2/3;
      }
    </style>
  </head>

  <body>
    <div class="container">
      <p class="paragraph">bobby hadz com abc 123 xyz.</p>

      <p class="paragraph">This is a very long sentence.</p>
    </div>
  </body>
</html>

using css grid to set max character length

The code for this article is available on GitHub

We wrap the p tags in a div and set the element's display property to grid.

The grid value enables us to align elements into columns and rows.

The grid-template-columns CSS property can be used to define the track sizing of the grid columns.

In this case, we have 3 columns where the middle column has a maximum width of 15 characters.

We then set the grid-column CSS property on the p elements.

The property specifies the grid item's size and location within a grid column.

A similar solution would be to simply set the max-width CSS property on the p elements to N characters.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />

    <style>
      .paragraph {
        max-width: 10ch;
      }
    </style>
  </head>

  <body>
    <p class="paragraph">bobby hadz com abc 123 xyz.</p>

    <p class="paragraph">This is a very long sentence.</p>
  </body>
</html>

set max width to n characters

The code for this article is available on GitHub

N characters are displayed and then the text is wrapped to the next line.

You can also set the overflow-wrap property to anywhere to achieve a similar result.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />

    <style>
      .paragraph {
        max-width: 100px;
        word-break: normal;
        overflow-wrap: anywhere;
      }
    </style>
  </head>

  <body>
    <p class="paragraph">bobby hadz com abc 123 xyz.</p>

    <p class="paragraph">This is a very long sentence.</p>
  </body>
</html>

set overflow wrap property to anywhere

The code for this article is available on GitHub

When the word-break CSS property is set to normal, then the default line break rule is used.

When overflow-wrap is set to anywhere, unbreakable string of characters like long words or a URL may be broken at any point if there are no acceptable break points in the line.

Notice that the characters are still broken up nicely.

There is also a break-all value of the word-break property.

The break-all value inserts word breaks between any two characters to prevent overflow.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />

    <style>
      .paragraph {
        max-width: 100px;
        word-break: break-all;
      }
    </style>
  </head>

  <body>
    <p class="paragraph">bobby hadz com abc 123 xyz.</p>

    <p class="paragraph">This is a very long sentence.</p>
  </body>
</html>

set word break to break all

The code for this article is available on GitHub

However, notice that this makes the text a bit difficult to read.

I've also written an article on how to limit text length to N lines using CSS.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

How to set Max Character length in CSS [5 Ways]