Breaking a div without content into a new line (no text)-CodePudding

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?

CodePudding user response：

Thanks for that. Trim is a string method and as I said, I don't have any strings, so this won't be useful. Let me show you the code, so you will better understand.

const changeLetterToColor = (e) => {
  e.preventDefault();
  if (input !== "") {
     const text = input.toLocaleLowerCase();
     const splitText = text.split("");
     const singleCharacter = splitText.map((item, index) => {
        switch (item) {
           /* Category 1 */
           case "a":
              return renderItem("1", "1");
           case "b":
              return renderItem("1", "2");
           case "c":
              return renderItem("1", "3");
           case "d":
              return renderItem("1", "4");
           /* Category 2 */
           case "e":
              return renderItem("2", "1");
           case "f":
              return renderItem("2", "2");
           case "g":
              return renderItem("2", "3");
           case "h":
              return renderItem("2", "4");
           /* Category 3 */
           case "i":
              return renderItem("3", "1");
           case "j":
              return renderItem("3", "2");
           case "k":
              return renderItem("3", "3");
           case "l":
              return renderItem("3", "4");
           /* Category 4 */
           case "m":
              return renderItem("4", "1");
           case "n":
              return renderItem("4", "2");
           case "o":
              return renderItem("4", "3");
           case "p":
              return renderItem("4", "4");
           /* Category 5 */
           case "q":
              return renderItem("5", "1");
           case "r":
              return renderItem("5", "2");
           case "s":
              return renderItem("5", "3");
           case "t":
              return renderItem("5", "4");
           /* Category 6 */
           case "u":
              return renderItem("6", "1");
           case "v":
              return renderItem("6", "2");
           case "w":
              return renderItem("6", "3");
           case "x":
              return renderItem("6", "4");
           /* Category 7 */
           case "y":
              return renderItem("7", "1");
           case "z":
              return renderItem("7", "2");
           case " ":
              return `<div ></div>`;
           default:
        }
        return "";
     });

renderItem is basically a set of several divs without a content that all together create a different shape and colour for a letter.

All the returned items are rendering in a container, so the trim is not going to work with this.

CodePudding user response：

Using BR was my first thought to be honest but this also did not work.

I think that I just messed up my stylesheet and it affected it.

I managed to break the line only when I disabled flex but all of them are in one column now which does not make me happy. Suddenly as I turn on flex the layout is good except the break.

Is BR not working with flex?

CodePudding user response：

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

CodePudding user response：

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 ></div>
  <div></div><div></div><div></div><div></div><div></div><div></div><div></div>
  <div ></div>
  <div></div><div></div><div></div><div></div><div></div>
</body>
</html>

CodePudding user response：

Great, that was it. Flex. Thank you both!

Have a great day!