在Flex与Tailwind CSS中实现文本换行及空格保留的问题

问题原因分析 #

你的代码里whitespace-pre-line未生效，核心原因有两个：

• 框架（如React）会自动去除JSX中多行文本的多余空白字符，你代码里的换行和缩进空格在编译后被压缩，whitespace-pre-line没有可识别的换行符来处理。
• 父容器的flex items-center虽为垂直对齐属性，但如果子元素（p标签）的内容布局被压缩，也可能间接影响文本的换行渲染。

修复方案 #

方案1：用模板字符串保留原始换行（框架场景适配） #

在JSX中，用模板字符串包裹文本，确保编译时保留真实的换行符（\n），让whitespace-pre-line生效：

<div className="flex items-center group">
    <p
       className="px-6 py-3 rounded-b-lg rounded-r-lg bg-gray-800 w-[28rem] max-w-xs lg:max-w-md text-gray-200 whitespace-pre-line">
           {`Hello @Green 

Greetings from VPN Infotech! We're thrilled about your positive experience with us. We're here to offer our expertise/service as listed.

• We recommend integrating AI into your existing website or mobile application to enhance its performance. 
• Our team specializes in optimizing and quality assurance for your current web/mobile application, and we'll provide insights for upgrades and the implementation of new features in line with current trends. 
• Additionally, we offer maintenance services to ensure the ongoing smooth operation of your web/mobile application.

Thank you for considering VPN Infotech; we're excited about the prospect of working together again.

Best regards.`}
    </p>
</div>

方案2：调整Flex布局属性 #

如果不需要垂直居中效果，可移除items-center；若必须保留垂直居中，给p标签添加flex-1确保它占据可用空间，避免内容被压缩：

<div className="flex items-center group">
    <p
       className="flex-1 px-6 py-3 rounded-b-lg rounded-r-lg bg-gray-800 w-[28rem] max-w-xs lg:max-w-md text-gray-200 whitespace-pre-line">
           {`Hello @Green 

Greetings from VPN Infotech! We're thrilled about your positive experience with us. We're here to offer our expertise/service as listed.

• We recommend integrating AI into your existing website or mobile application to enhance its performance. 
• Our team specializes in optimizing and quality assurance for your current web/mobile application, and we'll provide insights for upgrades and the implementation of new features in line with current trends. 
• Additionally, we offer maintenance services to ensure the ongoing smooth operation of your web/mobile application.

Thank you for considering VPN Infotech; we're excited about the prospect of working together again.

Best regards.`}
    </p>
</div>

方案3：用HTML标签手动控制换行（更直观可控） #

放弃依赖whitespace-pre-line，直接用<br>标签换行，项目符号改用HTML列表元素，布局更规范：

<div className="flex items-center group">
    <p className="px-6 py-3 rounded-b-lg rounded-r-lg bg-gray-800 w-[28rem] max-w-xs lg:max-w-md text-gray-200">
        Hello @Green <br/><br/>
        Greetings from VPN Infotech! We're thrilled about your positive experience with us. We're here to offer our expertise/service as listed.<br/><br/>
        <ul className="list-disc pl-5">
            <li>We recommend integrating AI into your existing website or mobile application to enhance its performance.</li>
            <li>Our team specializes in optimizing and quality assurance for your current web/mobile application, and we'll provide insights for upgrades and the implementation of new features in line with current trends.</li>
            <li>Additionally, we offer maintenance services to ensure the ongoing smooth operation of your web/mobile application.</li>
        </ul><br/>
        Thank you for considering VPN Infotech; we're excited about the prospect of working together again.<br/><br/>
        Best regards.
    </p>
</div>

关键提示 #

• whitespace-pre-line的核心作用是保留换行符、合并连续空格，必须确保文本中存在真实的\n换行符才能生效。
• Flex布局中，要保证文本容器有足够的宽度和空间，避免内容被强制压缩导致换行失效。

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