将文本环绕固定列宽 React Bootstrap 布局

如何解决将文本环绕固定列宽 React Bootstrap 布局

我根据网格系统布局创建了一个包含四列的 React Bootstrap Card。我不是最擅长样式或 CSS，但如果文本太长，我希望将其换行 - 例如，在下图中，“波斯尼亚和黑塞哥维那”将其中一列推到了卡片的底部，当我真的希望文本根据列大小换行时。

这是我的第一列的 JSX：

return (
        <Card style={{ width: '25rem' }}>
            <Card.Body>
                <Row>
                    <Col sm='auto'>
                        <Row style={{ marginTop: '5px',marginBottom: '2.5px' }}>
                            {teams[0].name}
                        </Row>
                        <Row style={{ marginTop: '5px',marginBottom: '2.5px' }}>
                            {teams[1].name}
                        </Row>
                        <Row style={{ marginTop: '5px',marginBottom: '2.5px' }}>
                            {teams[2].name}
                        </Row>
                        <Row style={{ marginTop: '5px',marginBottom: '2.5px' }}>
                            {teams[3].name}
                        </Row>
                    </Col>

.
.
. 

如何让文本环绕固定的列宽？

解决方法

要将长文本分成多行，您可以使用 css 属性 word-break 传递 break-all:

word-break: break-all;

.box {
    width: 50px;
    word-break: break-all;
}

<div class="box">myreallylongsentenceshouldbebrokeninmultiplelines</div>