這個算法是針對英文文本而言的。

第一步：初始計算

初始計算將需要用到3個常量來約束初始計算的結(jié)果。第一個是字體單個字符的平均長寬比。

因為字符的高度容易獲取，一行的字?jǐn)?shù)也容易獲取，難的是一行中每個字符的寬度。

實現(xiàn)：1、假設(shè)某種字體的平均長度比為.44518217（每種字體它的平均字符長度比通常是不一樣的）。

實現(xiàn)：2、字符的高度其實就是字體大小，也就是font-size（與line-height無關(guān)，line-height指的是行高）。每一行文本肯定是有一個默認(rèn)字體大小的，而我們將得到的結(jié)果，最后這些文本中的字符的字體大小基本是和這個字體大小相近的。

然后，需要確定文本一行的理想長度所需要的字符數(shù)。根據(jù)treemapping的思想，假設(shè)每個字符都有相同高度或?qū)挾取Ｒ话銇碚f容器的寬度是已知的或可以被獲取的。容器的寬度除以每這個平均寬度就是可以容納的字符數(shù)。

實現(xiàn)：3、假設(shè)容器寬800像素，Math.floor(800/ (font-size × 0.44518217))就是每行理想的字符數(shù)。

第二步：迭代計算每行應(yīng)該放的內(nèi)容

拆分文本為單個單個的單詞（保留字意），接下來的算法是使每行的字符數(shù)盡可能接近每行的理想字符數(shù)。

實現(xiàn)：創(chuàng)建兩個容器，一個用來存放文本的下一個單詞，另一個用來存放文本的下兩個單詞。持續(xù)往兩個容器中添加后續(xù)字符，直到滿每行的理想字符數(shù)要求。如果某個單詞放進(jìn)第二個容器后多了一點，根據(jù)多多少的比例來選擇是放這一行還是換一行。

第三步：布局

使每行都撐到容器的兩端，這需要適當(dāng)縮放font-size, letter-spacing和word-spacing。

實現(xiàn)：

1.      使每一行的容器為inline-block（可以獲取實際的寬度），不縮放font-size，通過父容器寬度與span容器寬度的比來確定font-size應(yīng)該縮放多少倍(ratio)。

2.      根據(jù)1得到的結(jié)果，font-size = old-font-size * ratio就是這行新的字體大小。

3.      如果應(yīng)用新的字體大小后，超出或不夠，根據(jù)有沒有多個單詞來確定是通過控制letter-spacing還是word-spacing來控制間距來正好滿足。

附錄

Treemapping

信息與計算領(lǐng)域中通過嵌套的矩形來表達(dá)數(shù)據(jù)層次以及數(shù)據(jù)在每個層次中所占的比重的一種方法。