• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Pruebas Online
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

252
Vistas
Breaking a div without content into a new line (no text)

I am taking typed characters from input and depending what it is styling them differently and rendering in a container with different colour and shape.

This what I am trying to achieve is when user types a space in the input, the line breaks, so you have 2 divs in one line, 7 divs in second line and 5 divs in another line, all styled differently, without content and separated when space typed.

I know about overflow-wrap or white-space but they don't work for content without text. All my elements are empty divs are the same from content point of view, even the space, so how can I make them to break into new line when the space is inputed?

Can I make it happen with some combination of Javascript and CSS?

almost 3 years ago · Juan Pablo Isaza
2 Respuestas
Responde la pregunta

0

After seeing your answer, and if I understand correctly. Isn't it better to break the line on space as you want to do this:

   case " ":
      return `<br className='some classes' />`;

Old Answer:

To remove initial space, or space after text finishes, you can use Javascript's trim functionality:

const input = '     Hello World!     '
const unspacedInput = text.trim()

// the second variable removes initial and trailing space from your input.

For more info about using trim, you can check multiple examples on W3School

almost 3 years ago · Juan Pablo Isaza Denunciar

0

If you want to divs get in a line and break with space user input, use display:flex for container. and when user input was space, make a div breaks line like this example:

<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>

almost 3 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda