使用Tailwind构建餐厅菜单时，长文本导致Flex布局尺寸异常

我正在使用Tailwind制作餐厅数字菜单，当前代码如下：

<div class="flex gap-2 m-4 items-center">
    <h3 class="text-lg font-semibold my-2 leading-5">Hamburger</h3>
    <div class="grow bg-violet-950 h-0.5"></div>
    <p>$8.99</p>
</div>
<p class="ml-5 mr-16 -mt-4 text-sm text-justify">Served with tomato, lettuce and french fries</p>

短名称菜品显示正常，但当菜品名称较长（例如Cheeseburger with pineapple and bacon）时，即使h3文本已换行到第二行，它仍会占据除价格外的整行宽度，导致带有grow类的横线无法显示。我尝试为h3添加自定义的max-width-2/33（设置为70%）强制缩小宽度，虽能显示部分横线，但希望h3仅占据两行文本的实际宽度，从而让横线更长，我不介意文本换行。

解决方案 #

核心是让h3在flex容器中仅占据内容实际需要的宽度，同时允许文本换行，具体调整如下：

1. 给h3添加 flex-initial 属性，确保其宽度由内容决定，不会拉伸占满容器；
2. 搭配 whitespace-normal 确保文本能正常换行（默认已生效，添加后更稳妥）；
3. 保留flex容器的 items-center 维持垂直居中，横线的 grow 类会自动填充剩余空间。

修改后的代码：

<div class="flex gap-2 m-4 items-center">
    <h3 class="text-lg font-semibold my-2 leading-5 flex-initial whitespace-normal">Cheeseburger with pineapple and bacon</h3>
    <div class="grow bg-violet-950 h-0.5"></div>
    <p>$8.99</p>
</div>
<p class="ml-5 mr-16 -mt-4 text-sm text-justify">Served with tomato, lettuce and french fries</p>

补充说明

• 如果担心超长名称会过度占用宽度，可以搭配 max-w-[70%] 限制最大宽度，比如：flex-initial max-w-[70%] whitespace-normal，既避免内容溢出，又能保证横线有足够显示空间。
• flex-initial 等价于 flex: 0 1 auto，元素不会主动拉伸，但可以收缩，完美适配这种需要内容宽度优先的场景。

内容的提问来源于stack exchange，提问作者ErnuB