问题描述
我根据网格系统布局创建了一个包含四列的 React Bootstrap Card。我不是最擅长样式或 CSS,但如果文本太长,我希望将其换行 - 例如,在下图中,“波斯尼亚和黑塞哥维那”将其中一列推到了卡片的底部,当我真的希望文本根据列大小换行时。
这是我的第一列的 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>