避免网格溢出，单元格包含 shape-outside

Question

我正在尝试构建网格，其中一些单元格的元素将外部形状与一些措辞内容相结合。形状是三角形的（为简单起见），响应地填充了一半的单元格。

我的问题是措辞内容溢出了单元格（和网格），我尝试拟合单元格和网格打破了外部形状

.grid {
  display: grid;
  border: 1px solid red;  /* to show overflow */
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  width: 600px; /*  meant to be responsive but this width should show overflow occurring  */
}

.cell {
  grid-column-start: 1;
  height: 100%;
  border: 1px solid blue;   /* to show overflow */
}

.shape-outside {
  shape-outside: polygon(0 0, 100% 0, 0 100%);
  clip-path: polygon(0 0, 100% 0, 0 100%);
  background-color: lightblue;
  width: 100%;
  height: 100%;
  float: left;
}

<div class="grid">
  <div class="cell">
    <div class="shape-outside">
    </div>
    <div>Sed exercitationem eum dolorem quam nam sit explicabo. Ut facere nihil architecto dolores ea consequatur tempore. Modi possimus omnis velit ut numquam excepturi vel. Culpa velit quisquam illum aut cupiditate aut quisquam ut.
    </div>
  </div>
</div>

在示例中，我设置了一个固定宽度来显示问题 - 实际上，我想要 100%。

Answer 1

对于这种适应性工作，您将需要一点 javascript。

演示：

https://vandrieu.github.io/adaptative-shape-outside/

CSS 代码：

和你的一样，除了我用100%而不是600px

HTML 代码：

刚刚在文本 div 上添加了 class="text" 属性

JavaScript 代码：

function resizeAllShapes() {
  for (const cell of [...document.querySelectorAll('.cell')]) {
    let currentCellHeight, textHeight

    do {
      currentCellHeight = Number(cell.style.height.replace('px', ''))
      textHeight = cell.querySelector('.text').clientHeight
      cell.style.height = `${textHeight}px`
    } while (currentCellHeight !== textHeight)
  }
}

new ResizeObserver(resizeAllShapes).observe(document.body)

基本上，对于每个单元格，我们都在扩展单元格的高度，直到它与文本的高度匹配。

它在第一次迭代时不起作用，因为当我们第一次扩展三角形时，它会修改文本的布局，使文本进一步溢出到底部。但这不是一个繁重的 cpu 循环，仅经过几次迭代，它就非常适合。

调整大小观察器允许函数在页面加载和每次调整窗口大小时运行。

很抱歉，我不能推荐一个纯 CSS 解决方案，但我几乎可以肯定没有。形状的高度取决于必须适合多少文本，而可以容纳多少文本取决于形状的高度，因此每个变量都依赖于另一个变量，因此没有声明性的方式来执行此操作，您只需要以声明方式增加形状大小，直到它完全适合。

我希望这能有所帮助。

Answer 2

据我所知，做到这一点的唯一方法是以编程方式，例如，使用 javascript。

但是，如果您对近似值感到满意，这主要是可行的，那么下面的代码仅使用 CSS 和 HTML。

潜在的问题是浮动元素对布局流没有贡献，即，它对父元素的大小没有贡献。这意味着浏览器使用另一个元素文本来确定父元素的大小，但它会在它被包围之前执行此操作，因此它的表观高度是纯文本块所需要的。在你的情况下，一个直角三角形，这意味着高度只是它应该的一半。

下面的代码使用 hack 来解决这个问题，即使用一组相同文本但宽度小于一半的虚拟集，这意味着它将大约导致高度是其他情况的两倍。然后这个假人被隐藏起来。然后，虚拟对象被真实文本“覆盖”，方法是使真实文本和浮动在包装器内容中，该包装器内容绝对定位在 0 0 处，这是虚拟对象的布局流程定位虚拟对象的位置。

dummy 设置高度，它设置其父单元格的高度。另一个孩子 content 可以将其高度设置为父级的 100%，即双倍高度，然后 float 和 shape-outside 可以将其高度设置为 100%。

为了正确地包含浮动和真实文本，它们的父级（即内容）的显示需要设置为 flow-root 以启动新的流控制块，否则浮动实际上会飘到其他地方。

您可能希望使用 dummy 中的宽度来获得满足您需求的最佳值，并且还可以考虑 calc( nn% +- nnpx ) 例如。

.grid {
    display: grid;
    border: 1px solid red;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, auto);
}

.cell {
    grid-column-start: 1;
    border: 1px solid blue;
    position: relative;
}

.content {
    display: flow-root;
    position: absolute;
    height: 100%;
}

.shape-outside {
    shape-outside: polygon(0 0, 100% 0, 0 100%);
    clip-path: polygon(0 0, 100% 0, 0 100%);
    background-color: lightblue;
    width: 100%;
    height: 100%;
    float: left;
}

.dummy {
    visibility: hidden;
    width: 40%;
}

<div class="grid">
    <div class="cell">
        <div class="content">
            <div class="shape-outside"></div>
            <div>Sed exercitationem eum dolorem quam nam sit explicabo. Ut facere nihil architecto dolores ea consequatur tempore. Modi possimus omnis velit ut numquam excepturi vel. Culpa velit quisquam illum aut cupiditate aut quisquam ut.</div>
        </div>
        <div class="dummy">
            Sed exercitationem eum dolorem quam nam sit explicabo. Ut facere nihil architecto dolores ea consequatur tempore. Modi possimus omnis velit ut numquam excepturi vel. Culpa velit quisquam illum aut cupiditate aut quisquam ut.</div>
    </div>

    <div class="cell">
        <div class="content">
            <div class="shape-outside"></div>
            <div>Sed exercitationem eum dolorem quam nam sit explicabo. Ut facere nihil architecto dolores ea consequatur tempore. Modi possimus omnis velit ut numquam excepturi vel. Culpa velit quisquam illum aut cupiditate aut quisquam ut. Sed exercitationem eum dolorem quam nam sit explicabo. Ut facere nihil architecto dolores ea consequatur tempore. Modi possimus omnis velit ut numquam excepturi vel. Culpa velit quisquam illum aut cupiditate aut quisquam ut. Sed exercitationem eum dolorem quam nam sit explicabo. Ut facere nihil architecto dolores ea consequatur tempore. Modi possimus omnis velit ut numquam excepturi vel. Culpa velit quisquam illum aut cupiditate aut quisquam ut.</div>
        </div>
        <div class="dummy">Sed exercitationem eum dolorem quam nam sit explicabo. Ut facere nihil architecto dolores ea consequatur tempore. Modi possimus omnis velit ut numquam excepturi vel. Culpa velit quisquam illum aut cupiditate aut quisquam ut. Sed exercitationem eum dolorem quam nam sit explicabo. Ut facere nihil architecto dolores ea consequatur tempore. Modi possimus omnis velit ut numquam excepturi vel. Culpa velit quisquam illum aut cupiditate aut quisquam ut. Sed exercitationem eum dolorem quam nam sit explicabo. Ut facere nihil architecto dolores ea consequatur tempore. Modi possimus omnis velit ut numquam excepturi vel. Culpa velit quisquam illum aut cupiditate aut quisquam ut.</div>
    </div>

    <div class="cell">
        <div class="content">
            <div class="shape-outside"></div>
            <div>Sed exercitationem eum dolorem quam nam sit explicabo. Ut facere nihil architecto dolores ea consequatur tempore. Modi possimus omnis velit ut numquam excepturi vel. Culpa velit quisquam illum aut cupiditate aut quisquam ut. Sed exercitationem eum dolorem quam nam sit explicabo. Ut facere nihil architecto dolores ea consequatur tempore. Modi possimus omnis velit ut numquam excepturi vel. Culpa velit quisquam illum aut cupiditate aut quisquam ut.Sed exercitationem eum dolorem quam nam sit explicabo. Ut facere nihil architecto dolores ea consequatur tempore. Modi possimus omnis velit ut numquam excepturi vel. Culpa velit quisquam illum aut cupiditate aut quisquam ut.Sed exercitationem eum dolorem quam nam sit explicabo. Ut facere nihil architecto dolores ea consequatur tempore. Modi possimus omnis velit ut numquam excepturi vel. Culpa velit quisquam illum aut cupiditate aut quisquam ut.Sed exercitationem eum dolorem quam nam sit explicabo. Ut facere nihil architecto dolores ea consequatur tempore. Modi possimus omnis velit ut numquam excepturi vel. Culpa velit quisquam illum aut cupiditate aut quisquam ut.Sed exercitationem eum dolorem quam nam sit explicabo. Ut facere nihil architecto dolores ea consequatur tempore. Modi possimus omnis velit ut numquam excepturi vel. Culpa velit quisquam illum aut cupiditate aut quisquam ut.Sed exercitationem eum dolorem quam nam sit explicabo. Ut facere nihil architecto dolores ea consequatur tempore. Modi possimus omnis velit ut numquam excepturi vel. Culpa velit quisquam illum aut cupiditate aut quisquam ut.</div>
        </div>
        <div class="dummy">Sed exercitationem eum dolorem quam nam sit explicabo. Ut facere nihil architecto dolores ea consequatur tempore. Modi possimus omnis velit ut numquam excepturi vel. Culpa velit quisquam illum aut cupiditate aut quisquam ut. Sed exercitationem eum dolorem quam nam sit explicabo. Ut facere nihil architecto dolores ea consequatur tempore. Modi possimus omnis velit ut numquam excepturi vel. Culpa velit quisquam illum aut cupiditate aut quisquam ut.Sed exercitationem eum dolorem quam nam sit explicabo. Ut facere nihil architecto dolores ea consequatur tempore. Modi possimus omnis velit ut numquam excepturi vel. Culpa velit quisquam illum aut cupiditate aut quisquam ut.Sed exercitationem eum dolorem quam nam sit explicabo. Ut facere nihil architecto dolores ea consequatur tempore. Modi possimus omnis velit ut numquam excepturi vel. Culpa velit quisquam illum aut cupiditate aut quisquam ut.Sed exercitationem eum dolorem quam nam sit explicabo. Ut facere nihil architecto dolores ea consequatur tempore. Modi possimus omnis velit ut numquam excepturi vel. Culpa velit quisquam illum aut cupiditate aut quisquam ut.Sed exercitationem eum dolorem quam nam sit explicabo. Ut facere nihil architecto dolores ea consequatur tempore. Modi possimus omnis velit ut numquam excepturi vel. Culpa velit quisquam illum aut cupiditate aut quisquam ut.Sed exercitationem eum dolorem quam nam sit explicabo. Ut facere nihil architecto dolores ea consequatur tempore. Modi possimus omnis velit ut numquam excepturi vel. Culpa velit quisquam illum aut cupiditate aut quisquam ut.</div>
    </div>
</div>
Text after the grid.