인라인 블록 : 단어는 포장하지만, 오른쪽에있는 여분의 공간은

Question

내가 필요로 남아 있었다 :

내가 가진 :

그래서

, "국고"되풀이했다 그러나 오렌지 div가 인라인 블록 (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

당신이 당신의 단어 뒤에 br 태그를 사용해야하는이 출력을 필요로합니다.

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