Pequeña biblioteca de JavaScript para texto auto redimensionamiento-textFit

Vista prévia

Descripción

textFit es una biblioteca de JavaScript independiente que escala automáticamente y dinámicamente el texto para caber dentro de un contenedor de ancho fijo. Admite texto de una o varias líneas.

¿Cómo funciona?

Cargue textFit. js en el documento.

<script src="textFit.js"></script>

Hará que el contenido * Text * dentro de una escala de contenedor para ajustarse al contenedor. Se requiere que el contenedor tenga una anchura y una altura establecidas.

<div class="box" style="width:300px;height:300px">

Text Here
</div>

Habilite el cambio de tamaño automático del texto

textFit(document.getElementsByClassName('box'));

Opciones disponibles.

textFit(document.getElementsByClassName('box'), {


// align vertically using css tables

alignVert: false,


// set text-align: center

alignHoriz: false,


 // not set white-space: no-wrap

multiLine: false,


 // disable to turn off automatic multi-line sensing

detectMultiLine: true,


 // Min / Max font size

minFontSize: 6,

maxFontSize: 80,


// Re-process already-fit nodes.

 // Set to 'false' for better performance

reProcess: true,


 // Fit text to element width, regardless of text height

widthOnly: false,


 // if true, textFit will use flexbox for vertical alignment

alignVertWithFlexbox: false

})

Registro de cambios

07/30/2018

• iterar correctamente sobre HTMLCollection objetos.
• se agregó alignVertWithFlexbox. Esto mejora la alineación vertical