如果父元素的宽度太小,如何让<h1>
个元素占据下一行?
EXAMPLE:
Each word here is an <h1>
element. They are spaced by their parent <div>
using display: flex;
and gap: 1rem;
.
Now, the width of the parent <div>
is reduced, so how can I make the other <h1>
elements occupy the next line like the image below?
CODE:
<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>