Перенос содержимого столбца в Word в начальной загрузке React

#reactjs #typescript #react-bootstrap

Вопрос:

У меня есть таблица (строки и столбцы) в React-Bootstrap, которую я определил как:

 <Row>
    <Col className="col-4">
        <b>{product.name}</b>
    </Col>
    <Col className="col-2">
        <b>{product.quantity}</b>
    </Col>
    <Col className="col-2">
        {product.price}
    </Col>
    <Col className="col-2">
        <strong> {product.price * product.quantity}</strong>
    </Col>
    <Col className="col-2">
        <i className="fa fa-window-close fa-2x" aria-hidden="true"></i>
    </Col>
</Row>
 

Все остальные параметры в порядке, но product.name иногда параметр может быть длинным. Поскольку я дал ему только поле с 4 столбцами, оно иногда переполняется следующими столбцами и тем самым портит мою таблицу.

Есть ли способ, которым я могу охватить этот конкретный столбец, чтобы слово обтекало само себя, возможно, в следующей строке, и не переполняло содержимое следующих столбцов