如何使一组元素表现得像字符串？

Question

如果父元素的宽度变得太小，如何使

<h1>

元素占据下一行？

示例：

这里的每个单词都是一个

<h1>

元素。它们由父级

<div>

使用

display: flex;

和

gap: 1rem;

隔开。

现在，父级

<div>

的宽度减小了，那么如何让其他

<h1>

元素占据下一行，如下图所示？

代码：

<div className="flex gap-4">
    {
        text.split(" ").map((e, i) => (
            <h1 key={i} className="text-color-1 text-3xl font-bold text-center lg:text-left md:text-5xl lg:text-7xl whitespace-pre-line inline">
                {e}
            </h1>
        ))
    }
</div>

Answer 1

考虑通过

flex-wrap: wrap

Tailwind 实用程序类将

<div>

应用于

flex-wrap

元素：

const text = 'This is an example';

ReactDOM.createRoot(document.getElementById('app')).render(
  <div className="flex gap-4 flex-wrap">
    {text.split(' ').map((e, i) => (
      <h1
        key={i}
        className="text-color-1 text-3xl font-bold text-center lg:text-left md:text-5xl lg:text-7xl whitespace-pre-line inline"
      >
        {e}
      </h1>
    ))}
  </div>
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.3.0/umd/react.production.min.js" integrity="sha512-ZA7si8ER+VYYp/DB0qHGoBUUHww+JcrRLyNhlLHpZOnvWZppaUp7TgKT3VRb7TUhOwE9I4RTdGesYYYM0U73CQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.3.0/umd/react-dom.production.min.js" integrity="sha512-ZezdfPGeFUpe5Och082E7dtOcO51kZtQmF7skp34UfOkROcAWXhQZ4pHODBBXDF01jSjskWy5B9z8z2GGTqsPw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.tailwindcss.com/3.4.3"></script>

<div id="app"></div>