html lienzo texto desbordamiento elipsis

Question

¿Es posible dibujar texto en un lienzo que tiene puntos suspensivos al final del texto si el texto no cabe en el ancho disponible y debe ser truncado? Gracias.

Answer 1

No existe tal cosa para html5 drawText y sería un poco complicado de implementar. Necesitarías un lazo para recortar la cuerda hasta que encaje en el tamaño deseado. Si el texto no se gira o tiene cualquier otro efecto especial, sugeriría utilizar un div normal con posición absoluta y la siguiente de estilos CSS:

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

Answer 2

No hay una función estándar.

ya que necesitaba una, he hecho esta pequeña función que calcula la mejor cadena de montaje:

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

donde c es el contexto 2D.

se puede dibujar la cadena normalmente después de haber establecido su fuente y otros parámetros de dibujo de su lienzo:

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

Answer 3

Hay algunas navegador - las tecnologías relacionadas que no son compatibles con varias líneas de renderizado de texto.

Es por eso que he desarrollado una pequeña biblioteca para tratar este problema (entre otros). La biblioteca proporciona objetos para modelar y realizar el procesamiento de texto a nivel de letra. Esto debería hacer justo lo que necesita:

Obtenga más información en http://www.samuelrossille.com/home/jstext para captura de pantalla, tutorial y enlace de descarga.