将没有内容的 div 换行（无文本）

Question

我正在从输入中获取键入的字符，并根据它以不同方式设置它们的样式，并在具有不同颜色和形状的容器中呈现。

我想要实现的是，当用户在输入中键入 space 时，换行符，所以一行有 2 个 div，第二行有 7 个 div，另一行有 5 个 div , 所有样式都不同，没有内容并且在输入 space 时分隔。

我知道 overflow-wrap 或 white-space 但它们不适用于没有文本的内容。我所有的元素都是空的 div 从内容的角度来看是相同的，甚至是 space，那么如何让它们在输入 space 时换行？

我可以通过 Javascript 和 CSS 的某种组合来实现吗？

Answer 1

看到你的回答，如果我理解正确的话。如果您想这样做，在 space 上换行不是更好吗：

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

旧答案：

要在文本完成后删除开头的 space 或 space，您可以使用 Javascript 的 trim 功能：

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

// 第二个变量从您的输入中删除初始和尾随 space。

有关使用 trim 的更多信息，您可以在 W3School

上查看多个示例

Answer 2

如果您想要 div 进入一行并使用 space 用户输入中断，请使用 display:flex 作为容器。当用户输入 space 时，创建一个 div 断行，如下例所示：

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

将没有内容的 div 换行（无文本）

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

html

javascript

css

whitespace

input