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