Max Character Length with Ellipsis Using CSS

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;
}