Question

EDIT。这个问题按照@Aziz在评论中的建议进行了改写。以前曾要求用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是一个块元素。这样它就会占据父母的宽度并将其余部分包裹在其下面。

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

1 个答案: