React Bootstrap卡片固定列宽下如何实现长文本自动换行

• 你给列设置的sm='auto'是核心诱因：该属性会让列宽完全跟随内容宽度自适应，没有固定约束，长文本会直接把列撑宽，挤占其他列的布局空间
• 无空格的长字符串（比如连写的国家名）默认遵循CSS换行规则：只会在空格、标点位置换行，不会在长单词中间断开，因此会直接溢出撑破容器边界

1. 取消自适应列宽，设置固定列宽 #

四列布局下可以直接用React Bootstrap的标准栅格比例实现固定列宽：
栅格系统总宽度分为12等份，四列的话每列占3份（4 * 3 = 12），刚好占满一行且不会被内容撑开。
把原来的<Col sm='auto'>改成<Col sm={3}>即可。
如果需要自定义列宽，也可以直接给Col加内联样式强制固定宽度：
style={{ flex: '0 0 25%', maxWidth: '25%' }}
该样式会禁止列随内容伸缩，强制占满容器的25%宽度。

2. 新增长文本换行规则 #

给文本容器添加CSS规则，允许无空格的长单词在任意位置断开换行，避免溢出。
可以直接给装文本的行添加内联样式，也可以在外层容器统一设置，避免重复写代码。

return (
        <Card style={{ width: '25rem' }}>
            {/* 在外层统一设置换行规则，内部所有文本都会继承 */}
            <Card.Body style={{ wordBreak: 'break-word' }}>
                <Row>
                    {/* 固定列宽：每列占3份栅格，不会被内容撑开 */}
                    <Col sm={3}>
                        <Row style={{ marginTop: '5px', marginBottom: '2.5px', lineHeight: '1.4' }}>
                            {teams[0].name}
                        </Row>
                        <Row style={{ marginTop: '5px', marginBottom: '2.5px', lineHeight: '1.4' }}>
                            {teams[1].name}
                        </Row>
                        <Row style={{ marginTop: '5px', marginBottom: '2.5px', lineHeight: '1.4' }}>
                            {teams[2].name}
                        </Row>
                        <Row style={{ marginTop: '5px', marginBottom: '2.5px', lineHeight: '1.4' }}>
                            {teams[3].name}
                        </Row>
                    </Col>
                    {/* 其余3列按照相同方式设置即可 */}
                </Row>
            </Card.Body>
        </Card>
)

如果希望长单词换行时更自然，可以把外层的换行规则改成overflowWrap: 'anywhere'，该规则会优先在原有空格位置换行，实在放不下才会在单词中间断开，比强制断行的体验更好。

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