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

Question

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

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

Answer 1

使用flexbox并将样式放在内跨区域上：

.content {
  margin:10px;
  max-width: 150px;
  display: flex;
}
.content span{
  flex: 0 1;
  border:1px dotted black;
}

<div class="content">
  <span>1 line works</span>
</div>

<br>

<div class="content">
  <span>2 lines alsoworkhere</span>
</div>

Answer 2

感谢目前为止的所有答案。我仍然希望有人拥有纯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>

Answer 3

将word-break: break-all;添加到.content

以下是demo

Answer 4

为max-width: 150px;和div

添加了span

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

.test{
   max-width: 150px;
   display:inline-block;
    word-break:break-all
}

   

  <div class="content">
      <span class="test">1 line works</span>
    </div>
    
    <br>
    
    <div class="content">
      <span class="test">2 is this what you wantsimon</span>
    </div>