Inline-Block: Es wurde umbrochen aber besonders viel Platz auf der rechten Seite nach links

Question

ich brauche:

ich habe:

Also "Fiskus" umbrochen wurde Allerdings hat es ziemlich viel Platz gelassen, trotz orange div ist Inline-Block. CSS:

.BlockContainer{ 
 
    background: blue; 
 
    width: 400px; 
 
} 
 

 
.InlineBlock { 
 
    display: inline-block; 
 
    background: teal; 
 
    font-size: 18px; 
 
    line-height: 1.2; 
 
    font-weight: 700; 
 
    text-transform: uppercase; 
 
    color: #f5511e; 
 
    padding: 2px 4px; 
 
}

<div class="BlockContainer"> 
 
    <div class="InlineBlock"> 
 
    Dumpy kibitzer jingles as exchequer overflows. 
 
    </div> 
 
</div>

Answer 1

Wenn Sie diese Ausgabe müssen Sie br Tag nach dem Wort zu verwenden. Standardmäßig wird der Text versuchen, den gesamten Raum der Linie zu nehmen, und es bricht, wenn es nicht den Raum verlassen kann Sie sehen:

.BlockContainer{ 
 
    background: blue; 
 
    width: 400px; 
 
} 
 

 
.InlineBlock { 
 
    display: inline-block; 
 
    background: teal; 
 
    font-size: 18px; 
 
    line-height: 1.2; 
 
    font-weight: 700; 
 
    text-transform: uppercase; 
 
    color: #f5511e; 
 
    padding: 2px 4px; 
 
}

<p>Inline-block alone (no spaces)</p> 
 
<div class="InlineBlock"> 
 
    Dumpy kibitzer jingles as exchequer overflows. 
 
    </div> 
 

 
<p>Inline-block with fixed width of parent (in this case upper text fit the space)</p> 
 
<div class="BlockContainer"> 
 
    <div class="InlineBlock"> 
 
    Dumpy kibitzer jingles as exchequer overflows. 
 
    </div> 
 
</div> 
 
<p>Inline-block with fixed width of parent (no enough space for text so line break)</p> 
 
<div class="BlockContainer" style="width:350px;"> 
 
    <div class="InlineBlock"> 
 
    Dumpy kibitzer jingles as exchequer overflows. 
 
    </div> 
 
</div> 
 
<p>Inline-block with fixed width of parent and *br*</p> 
 
<div class="BlockContainer" style="width:350px;"> 
 
    <div class="InlineBlock"> 
 
    Dumpy kibitzer jingles as<br> exchequer overflows. 
 
    </div> 
 
</div>