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

javascripthtmlcssinputwhitespace


Solution 1:[1]

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

Solution 2:[2]

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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Magical Briefcase

Related Questions