div的宽度与多线跨度紧密配合

Question

我希望有一个div给定max-width的宽度与其孩子的宽度紧密相符span.只要span只有一行,一切正常,但一旦换行,父级div将具有最大宽度.

.content {
  margin: 10px;
  max-width: 150px;
  border: 1px dotted black;
  display: inline-block;
}

<div class="content">
  <span>1 line works</span>
</div>
<br>
<div class="content">
  <span>2 lines dont workworkwork</span>
</div>

第一个div紧密贴合,然而第二个div设置在最大宽度 - 但它可能更紧,我希望它更紧.另见我的笔http://codepen.io/sheinzle/pen/gpVjbG

甚至可以在HTML中获得更紧密的契合度？

Answer 1

感谢到目前为止所有的答案。我仍然非常希望有人有一个纯 HTML/CSS 解决方案。

同时，这里有一个借助 JavaScript 的快速修复（CSS/HTML 与 OP 相同）。它可能无法捕获所有边缘情况，但目前可以使用。笔位于http://codepen.io/sheinzle/pen/MwNdgO

document.addEventListener("DOMContentLoaded", function(event) {
  // get list of all spans
  list = document.querySelectorAll('.content span');
  for (var i=0; i<list.length; i++) {
    // retrieve width of span and apply it to parent
    w = list[i].offsetWidth;
    list[i].parentNode.style.width = w+"px";
  }
});

.content {
  margin:10px;
  max-width: 150px;
  border:1px dotted black;
  display:inline-block;
}

<div class="content">
  <span>1 line works</span>
</div>
<br>
<div class="content">
  <span>2 lines do workworkwork</span>
</div>