CSS“Shrinkwrap”方法如何使用max-width並且沒有BR換行標記？

Question

我正在嘗試創建一個最大寬度邊界框，它將包裝文本（在空格上，不允許斷字）和shrinkwrap到最長文本行的寬度。 有關各種收縮包裝方法的演示，請參閱http://www.brunildo.org/test/IEMshrink-to-fit.html

我選擇了“浮動”方法，但在我的測試中，沒有一種方法能達到我想要的效果。

在下面的示例代碼中（也可以在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的顯示更改為表格標題接近您的要求。 但它並不完美，我不能真正推薦它作為一個全心全意的解決方案，主要是因為沒有在任何其他瀏覽器中測試它。

Answer 2

自從早期的“表標題”答案發布以來，不確定瀏覽器行為是否已更改，但目前無效（使用Chromium 41）：

實際上，純CSS似乎無法實現理想的行為（截至2015年）。 在另一個SO問題中提供了進一步的解釋和輕量級的Javascript解決方法： max-width調整以適應文本？