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.

Dejar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *