Estoy tomando caracteres escritos de la entrada y, dependiendo de lo que sea, los estoy diseñando de manera diferente y renderizándolos en un contenedor con diferentes colores y formas.
Esto es lo que estoy tratando de lograr cuando el usuario escribe un espacio en la entrada, la línea se rompe, por lo que tiene 2 divs en una línea, 7 divs en la segunda línea y 5 divs en otra línea, todos con un estilo diferente, sin contenido y separados cuando se escribe espacio.
Conozco overflow-wrap o white-space, pero no funcionan para contenido sin texto. Todos mis elementos son divs vacíos, son iguales desde el punto de vista del contenido, incluso el espacio, entonces, ¿cómo puedo hacer que se rompan en una nueva línea cuando se ingresa el espacio?
¿Puedo hacer que suceda con alguna combinación de Javascript y CSS?
Después de ver tu respuesta, y si entiendo correctamente. ¿No es mejor romper la línea en el espacio ya que quieres hacer esto?
case " ": return `<br className='some classes' />`;Respuesta antigua:
Para eliminar el espacio inicial o el espacio después de que finalice el texto, puede usar la funcionalidad de recorte de Javascript:
const input = ' Hello World! ' const unspacedInput = text.trim()// la segunda variable elimina el espacio inicial y final de su entrada.
Para obtener más información sobre el uso de recortes, puede consultar varios ejemplos en W3School
Si desea que los divs entren en una línea y se rompan con la entrada del usuario del espacio, use display:flex para el contenedor. y cuando la entrada del usuario fue espacio, haga una línea de saltos div como este ejemplo:
<html> <head> <style> body{ display:flex; flex-wrap:wrap; } div:not(.space){ width:50px; height:50px; background:red; } .space{ height:0; flex-basis: 100%; } </style> </head> <body> <div></div><div></div> <div class="space"></div> <div></div><div></div><div></div><div></div><div></div><div></div><div></div> <div class="space"></div> <div></div><div></div><div></div><div></div><div></div> </body> </html>