Wie HTML-Element seinen Inhalt umbrechen und verkleinern, um danach zu passen?

Question

BEARBEITEN. Die Frage wird wie von @ Aziz in seinen Kommentaren vorgeschlagen umformuliert. Es wurde zuvor nach dem gleichen Effekt mit inline-block gefragt, was unmöglich scheint, siehe die Antwort auf CSS when inline-block elements line-break, parent wrapper does not fit new width. Die neue Frage fragt, wie sonst dieser Effekt erreicht werden kann, so ist es nicht mehr doppelt.

Ich habe einen übergeordneten Zeilencontainer mit zwei untergeordneten Spalten. Ich möchte, dass jeder der Kinder seinen Textinhalt einpackt und dann schrumpft, um ihre Breite nach der Verpackung anzupassen.

Das folgende Beispiel erreicht fast diesen Effekt:

.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

Das einzige Problem ist, dass jedes Kind nicht vollständig fit sein Inhalt nicht schrumpft. In jedem Kind befindet sich auf der rechten Seite des Textes eine weiße Leerstelle.

Answer 1

Um Ihren gewünschten Effekt zu erzielen, müssen Sie nur sicherstellen, dass .child ein Blockelement ist. auf diese Weise wird es die Breite des Elternteils einnehmen und den Rest darunter legen.

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