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倉庫