使用 CSS 将文本换行到网格单元格的另一侧

Question

鉴于此 html 结构，其中 LLGrid 在 CSS 中显示为 grid，我如何才能确保我的文本被包裹在同一个单元格中，就像它被分成两列一样？

我没能找到一种方法来对文本进行编程以执行此操作，因此它一直溢出到单元格之外，因为它太长了。

.LLgrid {
  display: grid;
  grid-gap: 3px;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(3, 1fr);
  background-color: red;
  position: center;
  padding: 10px;
  width: 1400px;
}

.cell {
  /* center the cell content */
  justify-content: center;
  align-items: center;
  display: flex;
  font-family: Arial;
  background: white;
  width: 680px;
  height: 150px;
  color: black;
  font-size: 12px;
  overflow-wrap: break-word;
}

<div class="LLcontainer">
  <div class="LLgrid">
    <div class="cell" id="1"> one
      <div class="row">
        <div class="column">
          <p>Very very long text <br> Broken into multiple lines </p>
        </div>
      </div>
    </div>

    <div class="cell" id="2"> two </div>
    <div class="cell" id="3"> three </div>
    <div class="cell" id="4"> four </div>
    <div class="cell" id="5"> five </div>
    <div class="cell" id="6"> six </div>
  </div>
</div>

编辑 2021 年 9 月 8 日：

从属于（其 CSS 发布在下方）。因此，当我应用 **Jonty** 提出的解决方案时，我的单元格仍然很乱。对于 [Demo1][2] 代码段，我现在是运行 CSS。

.screen {
    width: 1450px;
    margin: 0 auto;
    padding: 20px 24px;
    font-family: verdana, arial;
    text-align: center;
    background: #130a06;
    color: white;
}

Answer 1

您可以将内容拆分为单独的列，并将 display:flex; 应用于行，将 min-width: 100%; 应用于列，以便它们垂直阅读：- demo

或者您可以将 display:flex; 和 flex-wrap:wrap; 应用于该列，但它们的内容将水平阅读。 - demo

Answer 2

最后，我设法部署了自己的解决方案。

我删除了建议的内部 div 行，列 并且我在 div class="细胞直接。

在 CSS 上，我使用了列属性来根据需要显示文本。之后我将文本格式化为完整可见。

这个解决方案最适合我，因为该页面是静态的（它将用作仪表板而不是网站，因此我认为有些死板）。

.cell {
  justify-content: center;
  column-count: 3;
  align-items: center;
  font-family: Arial;
  background: white;
  width: 848px;
  height: 310px;
  color: black;
  font-size: 16px;
  margin: 5px;
  overflow-wrap: break-word;
  /*Column Style*/
  column-count: 3;
  column-gap: 40px;
  column-rule-width: 440px;
}

使用 CSS 将文本换行到网格单元格的另一侧

Wrap text onto other side of a grid cell with CSS

html

css

css-grid