css - 将列的宽度限制为特定网格项的宽度

Question

我有一个简单的用例:商品标题和描述。标题应显示在说明上方，我希望标题确定整个列的宽度，也适用于“说明”行。

使用 CSS Grid 可以实现吗？如果可以，如何实现？

这是期望的输出:

这就是代码，基本上:

.grid-container {
  display: grid;
  grid-template-columns: 1fr;
}

<div class="grid-container">
  <div class="A">
    DIV A contains the TITLE
  </div>
  <div class="B">
    DIV B has much more text but I want its text to wrap to the width of div.A (no cut of words, just wrapping)
  </div>
</div>

Answer 1

不要将列宽设置为 1fr，而是使用 min-content。

使用 min-content，该列将利用所有换行符(文本换行)机会。

它基本上环绕所有文本，直到列达到最长单词的宽度。

.grid-container {
  display: grid;
  grid-template-columns: min-content; /* formerly 1fr */
}

<div class="grid-container">
  <div class="A">
    DIV A contains the TITLE
  </div>
  <div class="B">
    DIV B has much more text but I want its text to wrap to the width of div.A (no cut of words, just wrapping)
  </div>
</div>

然后，抑制标题框中的换行符:

.grid-container {
  display: grid;
  grid-template-columns: min-content;
}

.A {
  white-space: nowrap;
  background-color: lightgreen; /* just for illustration */
}

<div class="grid-container">
  <div class="A">
    DIV A contains the TITLE
  </div>
  <div class="B">
    DIV B has much more text but I want its text to wrap to the width of div.A (no cut of words, just wrapping)
  </div>
</div>

引用资料:

• https://www.w3.org/TR/css3-grid-layout/#track-sizing
• https://www.w3.org/TR/css-sizing-3/#min-content
• Difference between hard wrap and soft wrap?
• https://developer.mozilla.org/en-US/docs/Web/CSS/white-space