html kanvas text overflow elispin

Question

Metin, kullanılabilir genişliğe sığmayacak ve kesilmesi gerekiyorsa, metnin sonunda elips içeren bir tuval üzerine metin çizmek mümkün mü? Teşekkürler.

Answer 1

html5 drawText için böyle bir şey yoktur ve uygulamak biraz karmaşık olabilir. İstenilen boyuta uyacak şekilde dizgiyi kesmek için ilmiğe ihtiyacınız olacaktır.

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

Answer 2

standart işlevi yoktur: Metin döndürülmüş değilse veya başka herhangi bir özel etkisi varsa , mutlak pozisyon ile normal div ve aşağıdaki CSS stil kullanmak öneririm. Bir tane Gerektiğinde

, ben en iyi uydurma dize hesaplar bu küçük işlevi yapmıştır: c 2D bağlamı olduğunu

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

.

Normalde yazı tipi ve tuvalin diğer çizim parametrelerini ayarlamak sonra dizeyi çıkarabiliriz:

birkaç tarayıcı vardır

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

Answer 3

- çok satırlı metin oluşturmayı desteklemeyen ilgili teknolojiler. Bu nedenle (diğerlerinin yanı sıra) bu konuyla ilgilenmek için küçük bir kütüphane geliştirdim. Bu nedenle, bu sorunu çözmek için küçük bir kütüphane geliştirdim. Kütüphane, harf düzeyinde metin oluşturmayı modellemek ve gerçekleştirmek için nesneler sağlar. Bu, ihtiyacınız olanı yapmalıdır:

Ekran görüntüsü, eğitim ve dowload bağlantısı için http://www.samuelrossille.com/home/jstext adresinden daha fazla bilgi edinin.