在固定列宽的 React Bootstrap 布局周围环绕文本

Question

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

这是我的第一列的 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>

.
.
. 

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

Answer 1

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

word-break: break-all;

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

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