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

Question

我根据网格系统布局创建了一个包含四列的 React Bootstrap 卡片。我不是最擅长样式化或 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>

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

Wrap Text Around Fixed Column Width React Bootstrap Layout

javascript

css

reactjs

react-bootstrap

bootstrap-cards