Question

我的问题是使用display:table-caption解决的，但这似乎不正确（因为它实际上不是表格标题）。所以我的问题是什么是表格标题，这解决了我的问题，可以用不同的CSS实现吗？

我的原始问题：我有一个container div，其中包含header，details和footer div。 header（以及不太重要的footer）文本应保留在一行（无包装），container div应收缩包装（展开和缩小宽度）以适合这些单行元素。但是，不应允许details div扩展container div。相反，details文本应该根据容器的任何宽度进行简单包装（这将是header和/或footer文本的长度的结果。

我发现使用display:table-caption样式似乎可以实现这一点。但是这似乎不适合使用（在不是表格标题的内容上）。

参见示例： https://jsfiddle.net/uac032q4/1/

请注意display: table-caption风格的.container。

.container {
  display: table-caption;
  background-color: white;
}
.heading {
  font-size: 4em;
}
.details {
  background-color: yellow;
}
.nowrap {
  white-space: nowrap;
}

<div class="container">
    <div class="heading nowrap">Strech Dont Wrap</div>
    <div class="details">
    This is the paragraph that should wrap down once it reaches the available width provided by the container box which in turn is stretched to that width by the nowrap heading text.
  </div>
  <div class="nowrap">Footer</div>
</div>

所以，只使用CSS（没有JS）并且没有固定的宽度：有没有使用表格标题的替代CSS解决方案？什么是表格标题正在解决包装问题？

请注意，存在一个基本相同的问题，但是接受的答案使用JS而备用答案使用display:table-caption： Prevent text from expanding shrink wrapped div

防止文本扩展div而不使用JS或表格标题

0 个答案: