如何使 html 元素包装其内容并在之后缩小以适应？ [复制]

Question

编辑。正如@Aziz 在他的 cmets 中所建议的那样，这个问题被重新措辞。之前问的是用inline-block达到同样的效果，这似乎是不可能的，看答案 CSS when inline-block elements line-break, parent wrapper does not fit new width。新问题询问如何才能实现这种效果，因此不再重复。

我有一个包含两个子列的父行容器。我希望每个孩子都包裹他们的文本内容，然后在包裹之后缩小以适合他们的宽度。

下面的例子几乎达到了这个效果：

.parent {
  display: inline-block;
}
.child {
  max-width: 180px;
  display: inline-block;
  border: solid thin;
}

<div class="parent">
  <div class="child">
      I am child with loooong text.
  </div>
  <div class="child">
      I am child with loooong text.
  </div>
</div>

Here is a Demo

唯一的问题是每个孩子并没有完全缩小以适应其内容。每个子项内的文本右侧有明显的空白间隙。

Answer 1

要达到你想要的效果，你只需要确保.child 是一个块元素。这样它将占据父母的宽度并将其余部分包裹在其下。

.parent {
  border:1px solid red;
  display: inline-block;
}
.child {
  border:1px dashed red;
}

<div class="parent">
  I shrink to content slightly longer
  <div class="child">
    incl.Child
  </div>
  but not enough!
</div>

https://jsfiddle.net/azizn/021xqwo4/