如何让Div自适应换行文本宽度（消除右侧空白）？

现象 #

• 屏幕宽度充足时，文本单行显示，布局正常：
  
• 屏幕宽度缩小时，文本自动换行，但包裹<p>的Div仍保留单行状态的宽度，右侧出现空白，导致子元素无法实现视觉上的居中：
  

代码场景 #

用React+Tailwind实现的布局，父容器内包含图片和带文本的Div结构，核心代码如下：

export default function Hero() {
    return (
        <div className="flex flex-col gap-4 items-center justify-items-center">
            <div className="inline-flex flex-col lg:flex-row gap-8 lg:gap-16 items-center border-accent border-2">
                <img
                    src="/smiley.svg"
                    alt="self portrait"
                    className="translate-y-[-5%] w-[160px] md:w-[200px] lg:w-[300px] h-auto transition-transform duration-300 ease-in-out hover:scale-105"
                />
                <div className="font-display font-bold text-6xl md:text-7xl lg:text-9xl lg:text-left ">
                    <p className="border-primary border-2">Hi! I'm <span className="relative z-10 text-transparent bg-clip-text bg-gradient-to-r from-secondary to-primary animate-gradient-x">Name</span>!</p>
                </div>
            </div>
        </div>
    );
}

需求 #

• 保留文本自动换行能力，不使用flex-nowrap
• 文本换行后，外层Div能自适应收缩到换行后的文本宽度，保证子元素视觉居中

问题出在包裹<p>的Div在flex布局下默认会占据尽可能多的可用宽度，哪怕文本换行后不需要这么大的空间。只需两步修改就能解决：

1. 给包裹<p>的Div添加w-fit和self-center类：

   • w-fit强制Div宽度自适应内容，不管文本是单行还是多行
   • self-center确保在横向flex布局（lg:flex-row）时，这个文本容器能和图片垂直居中对齐，同时不占用多余宽度

2. （可选）给<p>标签加text-center类：

   • 让换行后的文本在Div内居中，视觉效果更统一

修改后的代码：

export default function Hero() {
    return (
        <div className="flex flex-col gap-4 items-center justify-items-center">
            <div className="inline-flex flex-col lg:flex-row gap-8 lg:gap-16 items-center border-accent border-2">
                <img
                    src="/smiley.svg"
                    alt="self portrait"
                    className="translate-y-[-5%] w-[160px] md:w-[200px] lg:w-[300px] h-auto transition-transform duration-300 ease-in-out hover:scale-105"
                />
                {/* 添加w-fit和self-center */}
                <div className="font-display font-bold text-6xl md:text-7xl lg:text-9xl lg:text-left w-fit self-center">
                    {/* 可选添加text-center */}
                    <p className="border-primary border-2 text-center">Hi! I'm <span className="relative z-10 text-transparent bg-clip-text bg-gradient-to-r from-secondary to-primary animate-gradient-x">Name</span>!</p>
                </div>
            </div>
        </div>
    );
}

补充说明 #

• 如果不需要文本在Div内居中，可以去掉text-center，但w-fit是解决宽度自适应的核心
• 之前单独用w-fit没生效，大概率是因为没配合flex布局下的self-center，导致父容器的宽度限制让Div没法收缩到内容宽度

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