HTML畫布文本溢出省略號

Question

如果文本不適合可用寬度且需要截斷，是否可以在文本末尾有省略號的畫布上繪製文本？謝謝。

Answer 1

html5的drawText沒有這樣的東西，實現起來會有點複雜。您需要循環修剪字符串，直到符合所需的大小。 如果文字不旋轉或者有其他特殊效果，我會建議使用帶有絕對位置的正常股利和下面的CSS樣式：

overflow: hidden; 
text-overflow: ellipsis; 
-o-text-overflow: ellipsis; 
white-space: nowrap; 
width: 100%; 

Answer 2

沒有標準功能。

因爲我需要一個，我做了這個小功能，計算最適合的字符串：

function fittingString(c, str, maxWidth) { 
    var width = c.measureText(str).width; 
    var ellipsis = '…'; 
    var ellipsisWidth = c.measureText(ellipsis).width; 
    if (width<=maxWidth || width<=ellipsisWidth) { 
     return str; 
    } else { 
     var len = str.length; 
     while (width>=maxWidth-ellipsisWidth && len-->0) { 
      str = str.substring(0, len); 
      width = c.measureText(str).width; 
     } 
     return str+ellipsis; 
    } 
} 

其中c是2D背景。

可以正常已經設置字體和畫布的其他繪圖參數後得出的字符串：

c.fillText(fittingString(c, "A big string that will likely be truncated", 100), 50, 50); 

Answer 3

有幾個瀏覽器 - 不支持多行文字渲染相關的技術。

這就是爲什麼我開發了一個小型圖書館來處理這個問題（等等）。該庫提供對象來建模和執行字母級別的文本渲染。這應該只是你所需要的：

閱讀更多在http://www.samuelrossille.com/home/jstext截圖，教程和下載鏈接。