html text vải tràn lược

Question

Có thể vẽ văn bản trên một canvas có một dấu chấm lửng ở phần cuối của văn bản nếu văn bản sẽ không phù hợp trong chiều rộng có sẵn và cần phải được cắt ngắn? Cảm ơn.

Answer 1

Không có điều như vậy cho html5 drawText và sẽ là một chút phức tạp để thực hiện. Bạn sẽ cần lặp để cắt chuỗi cho đến khi phù hợp trong kích thước mong muốn. Nếu văn bản là không xoay hoặc có bất kỳ hiệu ứng đặc biệt khác, tôi sẽ đề nghị sử dụng một div bình thường với vị trí tuyệt đối và phong cách CSS sau:

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

Answer 2

Không có chức năng tiêu chuẩn.

Như tôi cần một, tôi đã thực hiện chức năng này nhỏ mà tính chuỗi phù hợp tốt nhất:

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; 
    } 
} 

nơi c là bối cảnh 2D.

Bạn có thể vẽ các chuỗi bình thường sau khi đã thiết lập phông chữ của bạn và các thông số bản vẽ khác của canvas của bạn:

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

Answer 3

Có một vài trình duyệt - công nghệ liên quan mà không hỗ trợ nhiều dòng text rendering.

Đó là lý do tại sao tôi đã phát triển một thư viện nhỏ để đối phó với vấn đề này (trong số những người khác). Thư viện cung cấp các đối tượng modelize và thực hiện việc vẽ chữ thư cấp. Điều này sẽ làm chỉ là những gì bạn cần:

Đọc thêm tại http://www.samuelrossille.com/home/jstext cho ảnh chụp màn hình, hướng dẫn, và link dowload.