栏目内容溢出栏目

Question

我正在使用 React 和 Bootstrap。

我定义了一个容器、一行和列。

当屏幕缩小时，页面会响应，因为列相对于页面缩小或扩展。

但是，列内容溢出到列本身之外。

<Row>
    <Col className="turtle" xs={12} md={6} lg={6} xl={6} xxl={6}>
      <h1>testttttttttttttttttttttttttttttttttttttttttt</h1>
    </Col>
    
    <Col className="burtle" xs={12} md={6} lg={6} xl={6} xxl={6}>
      <p>im col 2</p>
    </Col>
</Row>

图像输出：

柱溢出结果

任何有关如何解决此问题并防止列内容溢出的帮助将不胜感激。

Answer 1

这个CSS应该可以解决你的问题-

.turtle {
  word-break: break-word;
  overflow-wrap: break-word;
}