当前位置：文江博客话题详情

将没有内容的 div 分成新行（无文本）

发布于 2025-01-16 00:26:07 字数 287 浏览 1 评论 0原文

我从输入中获取输入的字符，并根据不同的样式对它们进行不同的设计，并在具有不同颜色和形状的容器中进行渲染。

我想要实现的目标是，当用户在输入中键入空格时，换行符，因此一行中有 2 个 div，第二行有 7 个 div，另一行有 5 个 div，所有样式都不同，没有内容并且分开当输入空格时。

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

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

意犹 2025-01-23 00:26:07

看到你的回答后，如果我理解正确的话。当你想要这样做时，在空格上换行不是更好吗：

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

旧答案：

要删除初始空格，或文本完成后的空格，你可以使用Javascript的修剪功能：

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

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

有关使用修剪的更多信息，您可以查看 W3School 上的多个示例

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

回复收藏 0 原文

花开浅夏 2025-01-23 00:26:07

如果您希望 div 排成一行并与空格用户输入分开，请使用 display:flex 作为容器。当用户输入是空格时，让 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>

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>

回复收藏 0 原文

~没有更多了~