html - CSS "Shrinkwrap"方法如何在最大宽度和没有 BR 换行标记的情况下工作？

Question

我正在尝试创建一个最大宽度的边界框，它既可以换行文本(在空格上，不允许断字)，也可以收缩到最长文本行的宽度。有关各种 shrinkwrap 方法的演示，请参阅 http://www.brunildo.org/test/IEMshrink-to-fit.html

我选择了“ float ”方法，但在我的测试中，没有一种方法达到我想要的效果。

在下面的示例代码中(也可在 jsbin 获得实时预览)，我展示了当您让单词自动换行时会发生什么，以及当您插入 <br /> 时会发生什么。换行符标记。使用 <br />手动产生我正在寻找的效果，同时省略它正确地包装文本，但强制白框将整个最大宽度作为其宽度，我想避免这种情况。

<style>
  div#wrapper { background: #ddd; padding: 10px; }
  header { display: block; float: left; max-width: 320px; background: #fff; margin-bottom: 20px; clear: both; }
  #wrapper:after { content: " "; clear: both; display: table; }
</style>

<div id="wrapper">
  <header>
     <h1>Diane Von Furstenberg</h1>
  </header>
  <header>
    <h1>Diane Von<br />Furstenberg</h1>
  </header>
</div>

下面是问题的截图，并做了一些详细说明:

我创建了一个 JS 方法来手动插入 <br />标记作为权宜之计，但我想必须有一些方法可以仅使用 CSS/HTML 正确地做到这一点。感谢您的帮助!

Answer 1

在 Google Chrome 中，将 h1 的显示更改为 table-caption 接近您想要的。但它并不完美，我不能真正全心全意地推荐它作为解决方案，主要是因为没有在任何其他浏览器中测试它。