'ch' css units

Task:

Max width: 17 symbols

cm centimeters
mm millimeters
in inches (1in = 96px = 2.54cm)
px * pixels (1px = 1/96th of 1in)
pt points (1pt = 1/72 of 1in)
pc picas (1pc = 12 pt)

FYI: 1 in = 2.54cm = 25.4mm = 72pt = 6pc

em

Relative to the font-size of the element (2em means 2 times the size of the current font)

ex

Relative to the x-height of the current font (rarely used)

ch

Relative to width of the "0" (zero)

rem

Relative to font-size of the root element

vw

Relative to 1% of the width of the viewport*

vh

Relative to 1% of the height of the viewport*

vmin

Relative to 1% of viewport's* smaller dimension

vmax

Relative to 1% of viewport's* larger dimension

%

Relative to the parent element

Hello, I am 28 symbols text!

Hello, I am 28 sy...

.limited-text {
  max-width: 17ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

17 symbols

The End

'ch' css units

By Serge Zdobnov

'ch' css units

  • 486