使div的宽度紧密地适应多行span

Question

我想要一个具有给定max-width的

，以紧密适应其子元素的宽度。只要只有一行，一切都正常，但是一旦出现换行，则父

将具有最大宽度。

.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中是否可能实现更紧凑的适合度？

- Simon Heinzle

---

尝试在.content上使用“word-break: break-all”，看看是否适用于您。 - radiant

这是一种很好的方法来调整span元素的大小以适应容器 - 但我正在寻找相反的解决方案，我正在寻找一种将容器的宽度调整为span元素的解决方案。 - Simon Heinzle

我看到了，一个成员刚刚发布了一个答案。希望那是你想要的。除了 word-break 属性之外，还有 max-width: 100% 的属性。 - radiant

这是不可能的，因为你根本无法设置 span 的 width。 - Junaid

可以使用JavaScript（获取span的width并将其应用于父级div）实现，详见下面的答案。但是，我仍然更喜欢纯HTML/CSS解决方案。 - Simon Heinzle

Answer 1

使用flexbox并将样式放在内部的span上：

.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>

- Flyke

---

您的解决方案中线条的长度由文本中最长的单词限制。如果您将最后一个单词拆分为两个单词“also workhere”，则会出现三行：“2 lines”，“also”和“workhere”。 - d9k

Answer 2

感谢迄今为止的所有答案。我仍然非常希望有人能提供一个纯HTML/CSS解决方案。

同时，以下是使用JavaScript进行快速修复的方法（CSS/HTML与原始帖子相同）。它可能无法涵盖所有边缘情况，但目前它可以工作。代码链接：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>

- Simon Heinzle

Answer 3

在 .content 中添加 word-break: break-all;

这里是演示

- Masoom

---

这将通过断词使“span”适应容器，这与OP所要求的相反。 - Luca

当单词没有被分开时，我们发现了这个问题，留下了空白的空间（看起来很松散）。我相信现在空白的空间不再出现，这意味着它看起来更紧凑。 - Masoom

那是不正确的。OP希望容器与“span”一样小 - 请参阅他在问题中的最后一条评论。 - Luca

如果max-width不是非常重要的话，那么你可以移除max-width，这样它就能适应了。 - Masoom

我同意它看起来更紧凑 - 但正如@Luca所提到的，我正在寻找一个能正确适应父元素宽度的解决方案。max-width非常重要。 - Simon Heinzle

Answer 4

为 div 和 span 添加了 max-width: 150px;

  .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>

- Krsna Kishore

---

"word-break: break-all;"会“调整span的大小以适应容器-但我正在寻找相反的解决方案，即调整容器的宽度以适应span”-原帖评论。你的答案基本上与第一个发布的评论和其他发布的答案相同，并且不能实现原帖作者想要的效果。 - Luca

仅仅使用 max-width: 100% 并不能解决问题，因为在问题本身中明确提到了所需的 max-width。 - Luca

OP希望容器div的宽度与span一样宽。检查他的示例中的多行span，您会发现其比div本身窄。 - Luca

让我们在聊天中继续这个讨论。 - Krsna Kishore

@SimonHeinzle 为 test 类添加 word-break:break-all。 - Krsna Kishore