ch 与等宽字体

难题

有的时候，特别想经过字符来判断元素的长度，好比：

1. 多行文本溢出时，文字变省略号
2. 文字一个个的显示

效果分别以下：

第一种状况下，若是能够经过字符的数量判断长度是否溢出，从而把最后几个字符替换成省略号，那就没问题，然而一般状况下，i和M占的宽度明显是不同的，即便同样，也不知道它的宽度具体是多少。

第二种状况，也是须要一个一个字符的出现，因此遮罩的长度每次须要减小一个字符的长度，这也要求每一个字符是同样长的，且必须须要知道每一个字符的宽度。

方案

不一样字符的宽度能够经过等宽字体来设置，一般的字体，i和M的宽度不同，可是在等宽字体下，就是同样的，这个不难。

幸运的是，CSS Values and Units Module Level 3 增长了一个新单位ch，

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.)

它指定字符0的宽度，乍看没什么用，可是和等宽字体连起来下面的逻辑：

• 0的宽度是 1ch ，每一个字符同样宽 => n 个字符就是 nch

常见的等宽字体有：

font-family: Consolas, Monaco, monospace;

上述截图所在项目请戳个人CSS仓库