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

Question

I have created a React Bootstrap Card with four columns as per the grid system layout. I'm not the greatest at styling or CSS but I would like the text to be wrapped if it is too long- so for instance, in the image below, "BosniaAndHerzegovina" has pushed one of the columns to the bottom of the card, when I really want the text to be wrapped according to the column size.

Here is my JSX for the first column:

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>

.
.
. 

How do I get the text to wrap around a fixed column width?

Answer 1

to break long texts into multiple lines you can use the css property word-break passing break-all :

word-break: break-all;

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

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