Max Character Length with Ellipsis Using CSS

Written by
Published
Updated
Typical Read
1 minutes
Find your next web developer job
Drupal Web Developer at On Fire Media (San Antonio, TX)

Learn how to limit the number of characters with an added ellipsis using just CSS. Control it with breakpoints & you've got a truly responsive component.

tl;dr

Option 1: Using the ch length unit

p {
  overflow: hidden;
  max-width: 75ch;
  text-overflow: ellipsis;
  white-space: nowrap;
}

The magic of limiting character length with an ellipsis is the ch length, but there is a gotcha — how well it works depends on the font used.

A lot of articles out there get the definition of the ch length wrong — it does not mean “character width”. They claim you can make your content X amount of characters wide, or size images to be a certain number of characters, but that’s not true if using variable fonts.

This is because, despite what the letters ch might imply, ch units are not “character” units.  They are defined as:

Equal to the used advance measure of the “0” (ZERO, U+0030) glyph found in the font used to render it. (The advance measure of a glyph is its advance width or height, whichever is in the inline axis of the element.)

CSS Values and Units Module Level 3

So however wide the “0” character is in a given typeface, that’s the measure of one ch.  In monospace (fixed-width) fonts, where all characters are the same width, 1ch equals one character.  In proportional (variable-width) fonts, any given character could be wider or narrower than the “0” character.

Option 2: Using max-width & overflow

p {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

Option 3: Using flex

This technique is useful for multi-line truncation using just CSS.

p {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

Did you find Max Character Length with Ellipsis Using CSS useful? Get articles in your inbox.

…and don’t worry, I hate spam as much as you. Expect to hear from me at most once a week.

Share on facebook
Share on twitter
Share on linkedin
Share on reddit
Share on facebook

Stay updated.

Get a weekly email with the latest trends in web development & SEO.

Write a guest post.

Have an interesting article or idea? Become a guest blogger & pitch me your concept today.

Join the conversation.

Your email address will not be published. Required fields are marked *

All comments posted on 'Max Character Length with Ellipsis Using CSS' are held for moderation and only published when on topic and not rude. Get a gold star if you actually read & follow these rules.

You may write comments in Markdown. This is the best way to post any code, inline like `<div>this</div>` or multiline blocks within triple backtick fences (```) with double new lines before and after.

Want to tell me something privately, like pointing out a typo or stuff like that? Contact Me.