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?

Answer

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