React+Tailwind CSS动态容器内文本自动换行实现方案

我正在开发一个使用Tailwind CSS的React应用，遇到了动态尺寸容器内文本溢出的问题。我有一个CenteredRectangle.tsx组件，用于展示一个居中的矩形文本容器，希望文本在到达容器边缘时自动换行，同时允许容器根据内容横向和纵向扩展。但目前文本仍会溢出容器，想实现文本换行的同时保持容器的动态尺寸，该如何处理？

现状效果

期望效果

当前组件代码

import React from 'react';

interface CenteredRectangleProps {
  text: string;
}

const CenteredRectangle: React.FC<CenteredRectangleProps> = ({ text }) => {
  return (
    <div className="flex items-center justify-center h-screen">
      <div className="bg-white p-8 rounded-md text-black text-center max-w-screen-md w-full overflow-x">
        <p>{text}</p>
      </div>
    </div>
  );
};

export default CenteredRectangle;

解决方法 #

问题根源在于w-full强制容器占满父级宽度、overflow-x允许横向溢出，同时缺少长文本换行的强制规则。调整方案如下：

1. 移除w-full：让容器宽度自适应内容，同时保留max-w-screen-md限制最大宽度，避免容器过宽
2. 移除overflow-x：不需要允许横向溢出，改为让文本自动换行
3. 添加break-words：针对无空格的长文本（如长URL、连续字符），强制在单词中间断行换行

修改后的组件代码

import React from 'react';

interface CenteredRectangleProps {
  text: string;
}

const CenteredRectangle: React.FC<CenteredRectangleProps> = ({ text }) => {
  return (
    <div className="flex items-center justify-center h-screen p-4"> {/* 加内边距避免容器贴紧屏幕边缘 */}
      <div className="bg-white p-8 rounded-md text-black text-center max-w-screen-md">
        <p className="break-words">{text}</p>
      </div>
    </div>
  );
};

export default CenteredRectangle;

补充说明 #

• max-w-screen-md 确保容器最大宽度不超过中等屏幕尺寸，避免内容过于分散
• break-words 兼容连续无空格的长文本场景，保证文本能在容器边缘正常换行
• 移除w-full后，容器宽度会随内容自适应，但不会超出最大宽度限制，纵向则根据文本行数自动扩展
• 外层容器添加p-4是为了优化小屏幕下的显示体验，避免容器紧贴屏幕边缘

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