javascript

JavaScript – Dividir texto en varias líneas con espacio

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.

Agregar salto de línea si supera cierta longitud

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.

Estoy aquí para ayudarte 🤝💻


Estoy aquí para ayudarte en todo lo que necesites. Si requieres alguna modificación en lo presentado en este post, deseas asistencia con tu tarea, proyecto o precisas desarrollar un software a medida, no dudes en contactarme. Estoy comprometido a brindarte el apoyo necesario para que logres tus objetivos. Mi correo es parzibyte(arroba)gmail.com, estoy como@parzibyte en Telegram o en mi página de contacto

No te pierdas ninguno de mis posts 🚀🔔

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.
parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/

Ver comentarios

  • tengo el plugin corriendo en el puerto 8000 y el sublime pos en el 2106 y en el playground me aparece la impresora y puedo mandara imprimir cosas , pero en sublime pos 3 en impresoras no me aparece ninguna impresora, estoy en Raspberry

    • Tal vez no ha descargado la versión compatible para Sublime POS. Me parece que para Sublime POS 3 se usa la versión 3.2.1 pero en el playground se usa la 3.5.1. De cualquier manera, que usted pueda imprimir desde el playground es una buena señal, pues ya solo sería cuestión de ajustar Sublime POS 3.

Entradas recientes

Servidor HTTP en Android con Flutter

El día de hoy te mostraré cómo crear un servidor HTTP (servidor web) en Android…

1 semana hace

Imprimir automáticamente todos los PDF de una carpeta

En este post te voy a enseñar a designar una carpeta para imprimir todos los…

1 semana hace

Guía para imprimir en plugin versión 1 desde Android

En este artículo te voy a enseñar la guía para imprimir en una impresora térmica…

2 semanas hace

Añadir tasa de cambio en sistema de información

Hoy te voy a mostrar un ejemplo de programación para agregar un módulo de tasa…

3 semanas hace

Comprobar validez de licencia de plugin ESC POS

Los usuarios del plugin para impresoras térmicas pueden contratar licencias, y en ocasiones me han…

3 semanas hace

Imprimir euro € en impresora térmica

Hoy voy a enseñarte cómo imprimir el € en una impresora térmica. Vamos a ver…

4 semanas hace

Esta web usa cookies.