Hoy te voy a enseñar a agregar un salto de línea a un texto para evitar cortar las palabras en caso de que dicho texto supere determinada longitud de columna.
Dicho con otras palabras veremos cómo hacer que un texto salte a la siguiente línea automáticamente si es demasiado largo, sin que se corten las palabras.
Por ejemplo, supongamos que puedes imprimir 10 letras por línea como máximo. Un texto se vería así, cortando las palabras y dejándolas incompletas:
Hola mundo
soy un te
xto desde
parzibyte.me
Con la función que te mostraré hoy vamos a hacer que la palabra se corte en el espacio en blanco y queden solo palabras completas tomando en cuenta una máxima longitud para la línea. Por ejemplo:
Hola mundo
soy un
texto
desde
parzibyte.me
Te recuerdo que vamos a bajar las palabras a la siguiente línea usando JavaScript trabajando con cadenas (string). Sería el equivalente a overflow-wrap: break-word;
y word-break: normal;
de CSS.
Sin más que decir, veamos la función que recibe la cadena que va a dividir en varias líneas sin superar la máxima longitud.
Obviamente en el caso de que una palabra individual sea más larga que la máxima longitud, la misma será colocada completamente y no será dividida, ya que las divisiones se hacen cuando se encuentra un espacio.
const agregarSaltoDeLineaSiSuperaLongitud = (cadena, maximaLongitud) => {
if (cadena.length <= maximaLongitud) {
return cadena;
}
const palabras = cadena.split(" ");
let linea = "";
let resultado = "";
for (const palabra of palabras) {
if (linea.length + palabra.length > maximaLongitud) {
resultado += linea.trim() + "\n";
linea = palabra + " ";
} else {
linea += palabra + " ";
}
}
if (linea.trim().length > 0) {
resultado += linea.trim();
}
return resultado;
};
Un ejemplo de ejecución es el siguiente:
const maximaLongitudDeLinea = 20;
const cadena = "Hola mundo soy un texto desde parzibyte.me. Dividir las palabras en varias líneas es útil en las impresoras térmicas, así el texto no se ve cortado";
const dividida = agregarSaltoDeLineaSiSuperaLongitud(cadena, maximaLongitudDeLinea);
console.log("En varias líneas es:\n%s", dividida)
/*
Salida:
En varias líneas es:
Hola mundo soy un
texto desde
parzibyte.me.
Dividir las palabras
en varias líneas es
útil en las
impresoras térmicas,
así el texto no se
ve cortado
*/
Fíjate en que todas las líneas son menores a cierta longitud, y que si son muy largas se dividen en una nueva línea.
Hice este ejercicio debido a que un cliente me preguntaba cómo hacer esto para evitar cortar las líneas cuando se imprime en una impresora térmica.
Algunas impresoras térmicas ESC POS tienen un buzzer o zumbador que puede emitir sonidos, también…
En este corto tutorial de programación CSS con Tailwind vamos a ver cómo centrar un…
Hoy te voy a enseñar una aplicación web (programada con JavaScript en el lado del…
En este artículo te voy a enseñar una técnica para mejorar la calidad de las…
La API de OffscreenCanvas permite trabajar con un canvas en JavaScript sin tener que usar…
En este post voy a describir las novedades de mi plugin HTTP a ESC POS.…
Esta web usa cookies.