提醒：本文最後更新於 2025 天前，文中所描述的資訊可能已發生改變，請謹慎使用。

某次使用 cocos2d-html5 時發現，通過 cc.LabelTTF 顯示的文字即使寬度超過了預設值，也不會自動換行。上網搜了下，很多人都遇到了同樣的問題。

之前用 cocos2d-x 的 CCLabelTTF 沒這個問題。看了下程式碼，在 iOS 平臺上， CCLabelTTF 最終是呼叫 UIStringDrawing 的 drawInRect 函式，而這個函式支援設定 lineBreakMode，也就是換行模式。

接著再看 cocos2d-html5 裡的 CCLabelTTF.js，發現 _updateTTF 這個函式裡其實有換行邏輯，但是隻處理了空格和 \n 換行：如果一行文字太長，會在最近的空格處換行；\n 則是用來強制換行的。這個策略對於英文這種單詞之間有空格的語言來說是夠用，但是對於中文就不合適了。

如果在建立 LabelTTF 時，字串已按照指定寬度插入 \n 強制換行，那最終的展現結果就是我想要的。由於文字包含中文、英文、數字和符號，又很少使用等寬字型。所以要確定指定的寬度能顯示多少字元，除了不斷嘗試沒什麼好辦法。

首先，我們需要獲取指定文字的寬度，可以通過建立一個臨時 LabelTTF 來完成：

function getStrWidth(str, fontName, fontSize) {
    var tmpLabel = cc.LabelTTF.create(str, fontName, fontSize);
    return tmpLabel.getContentSize().width;
}
 

也可以用 measureText 來實現同樣的功能（下面這個方案在 html5 和 iOS 的 jsb 環境都 OK，在 java 環境下會報錯）：

function getStrWidth(str, fontName, fontSize) {
    cc.renderContext.font = fontSize + "px " + fontName;
    return cc.renderContext.measureText(str).width;
}

接著，就可以迴圈插入 \n 了。大概思路是指定一個差不多的初始值 L（可以用指定寬度 width 除以字型大小），截出 0 到 L 位置的字串，用 getStrWidth 計算寬度，如果比我們指定的寬度 width 大，L--，繼續比較；否則 L++ 繼續。直到 L 個字元寬度和我們指定寬度剛好相等（很小的概率），或者 L 個字元長度不夠，但 L+1 長度又多了的情況下，可以確定這一行可以放這 L 個字元。然後繼續處理下一行，直至字串結束。

實際效果和實現見 Demo 和程式碼。理論上，如果中英文混排的時候，應該儘可能避免把英文單詞拆開，這個 Demo 沒處理這種情況。效率方面我測試了下，6000 箇中英文字串以 500px 寬度，16px 字號插入 \n，用第一種方法耗時 10 幾 ms，第二種才幾 ms，基本都可以忽略不計。

--EOF--

提醒：本文最後更新於 2025 天前，文中所描述的資訊可能已發生改變，請謹慎使用。