html przepełnienie tekstu na płótnie ellipsis

Question

Czy jest możliwe narysowanie tekstu na kanwie z elipsą na końcu tekstu, jeśli tekst nie mieści się w dostępnej szerokości i musi zostać obcięty? Dzięki.

Answer 1

Nie ma czegoś takiego dla html5 drawText i byłoby nieco skomplikowane do wdrożenia. Będziesz potrzebował pętli do przycinania sznurka, aż pasuje w pożądanym rozmiarze. Jeżeli tekst nie jest obracany lub ma żadnego innego efektu specjalnego, proponuję użyć normalnego div z pozycji absolutnej i następujący styl CSS:

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

Answer 2

Nie ma standardowej funkcji.

Kiedy potrzebowałem, zrobiłem ten mały funkcję, która oblicza najlepszą ciąg zabudowy:

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

gdzie c jest kontekst 2D.

można narysować ciąg normalnie po ustawieniu czcionki i inne parametry rysunek płótnie:

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

Answer 3

Istnieje kilka przeglądarek - technologie związane, które nie obsługują renderowania tekstu wielu linii.

Dlatego opracowałem małą bibliotekę, aby poradzić sobie z tym problemem (między innymi). Biblioteka udostępnia obiekty do modelowania i wykonywania renderowania tekstu na poziomie litery. Powinno to zrobić dokładnie to, czego potrzebujesz:

Przeczytaj więcej na stronie http://www.samuelrossille.com/home/jstext, aby uzyskać zrzut ekranu, samouczek i link do pobrania.