文本环绕固定列宽React Bootstrap Layout

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

要将长文本拆分为多行，可以使用传递break-all的css属性word-break

word-break: break-all;

​

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

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

​