程序運行截圖如下：

下面提幾個知識點。

第一個是JS中實現靜態類，如下utils.js

export let HHUtils = {}HHUtils .StaticClass = (function(){let Return = {xxxxxxx: function(xxxx){let ret= 0;return ret;},yyyyyyy: function(xxxx, yyyy){let ret;........return ret;},zzzzzzz: function(zzz, zzzzz){let ret;......return ret;}};return Return; })();

這里就是依靠export導出對象，并且對象里面有給StaticClass方法，其中返回Return，在Return對象中寫上各種各樣的函數。通過這種方式就可以實現JS的靜態工具類了。

?

另外一個知識點是判斷字符串長度，也就是英文輸入法輸入的為1，中文輸入法輸入的為2：

關鍵代碼如下：

let Return = {//獲取字符串的長度：中文相關是2，英文相關是1getTextWidth: function(text){let len = 0;for(let i = 0; i < text.length; i++){if(text.charCodeAt(i) > 127 || text.charCodeAt(i) == 94){len += 2;}else{len += 1;}}return len;},

下面說下如何實現字符串自適應。此處只說思路，不說代碼：

如果要寫到矩形里面，矩形的長寬為100。那么如果是10大小的字體，在two.js中差不多可以寫10個中文，或者20個英文，也就是可以使用上面那個計算字符串長度的代碼。

在two.js中makeText寫文字是從中間寫，然后向兩邊增加。

最后是行，這里使用窮舉法，也就是從字體大小的8，10，12，14，16，18，20，也就是可以使用for循環去操作。如果是矩形寬為100，當有10個中文就換行，使用這個思路進行操作。

總結

以上是生活随笔為你收集整理的Web前端笔记-字符串自适应tip提示框（适应大小自动换行JS中静态工具类实现）思路的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。