Блог

Я создал карту начальной загрузки React с четырьмя столбцами в соответствии с макетом grid-системы. Я не силен в стилизации или 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>

.
.
. 
 

Как мне заставить текст обтекать фиксированную ширину столбца?

чтобы разбить длинные тексты на несколько строк, вы можете использовать свойство css word-break , передающее break-all :

 word-break: break-all;
 

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

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