html5文字自动变行,教你在Cocos2D-html5中怎样设置文字自动换行

上篇教程我们讲解了如何用label在Cocos2D-{.html5}}中换行，本篇教程将教你在Cocos2D-html5中设置自动换行。

某次使用cocos2d-html5时发现，通过cc.LabelTTF显示的文本即使宽度超过了预设值，也不会自动换行。上网搜了下，很多人都遇到了同样的问题。

之前用Cocos2d-x的CCLabelTTF没这个问题。看了下代码，在iOS平台上，CCLabelTTF最终是调用UIStringDrawing的drawInRect函数，而这个函数支持设置lineBreakMode，也就是换行模式。

接着再看cocos2d-html5里的CCLabelTTF.js，发现_updateTTF这个函数里其实有换行逻辑，但是只处理了空格和\\n换行：如果一行文本太长，会在最近的空格处换行；\\n则是用来强制换行的。这个策略对于英文这种单词之间有空格的语言来说是够用，但是对于中文就不合适了。

如果在创建LabelTTF时，字符串已按照指定宽度插入\\n强制换行，那最终的展现结果就是我想要的。由于文本包含中文、英文、数字和符号，又很少使用等宽字体。所以要确定指定的宽度能显示多少字符，除了不断尝试没什么好办法。

首先，我们需要获取指定文本的宽度，可以通过创建一个临时LabelTTF来完成：

也可以用measureText来实现同样的功能(下面这个方案在html5和iOS的jsb环境都OK，在java环境下会报错)：

接着，就可以循环插入\\n了。大概思路是指定一个差不多的初始值L(可以用指定宽度width除以字体大小)，截出0到L位置的字符串，用getStrWidth计算宽度，如果比我们指定的宽度width大，L--，继续比较；否则L++继续。直到L个字符宽度和我们指定宽度刚好相等(很小的概率)，或者L个字符长度不够，但L+1长度又多了的情况下，可以确定这一行可以放这L个字符。然后继续处理下一行，直至字符串结束。

实际效果和实现见Demo和代码。理论上，如果中英文混排的时候，应该尽可能避免把英文单词拆开，这个Demo没处理这种情况。效率方面我测试了下，6000个中英文字符串以500px宽度，16px字号插入\\n，用第一种方法耗时10几ms，第二种才几ms，基本都可以忽略不计。