html要素をコンテンツにラップして後で収縮させるには？

Question

EDIT。彼のコメントで@Azizによって提案されたように、この問題は言い直される。これまではinline-blockと同じ効果を達成することを求めていましたが、これは不可能と思われます。答えは CSS when inline-block elements line-break, parent wrapper does not fit new widthです。新しい質問は、この効果が他のどのように達成されるかを尋ねるので、は重複しないです。

私は2つの子列を持つ親の行コンテナを持っています。私はそれぞれの子供たちがテキストの内容を折り返して、幅がに収まるように収縮させてから、の折り返しにします。

次の例では、ほとんどこの効果を達成：

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