ラインラップはインライン要素の境界を切り捨てます

Question

私は、埋め込みと枠線を持つインライン要素のリストを持っています。 1つの要素が折り返されると、前の行の最後の要素はその境界を切り取られます。

HTML：

<div class="multi-select"> 
    <div class="selected-list"> 
    <span class="selected-item">aankoop;boodschap;koop <span class="remove-choice fa fa-close"></span></span> 
    <span class="selected-item">accessoire <span class="remove-choice fa fa-close"></span></span> 
    <span class="selected-item">afmeting <span class="remove-choice fa fa-close"></span></span> 
    <span class="selected-item">aantal;tal <span class="remove-choice fa fa-close"></span></span> 
    <span class="selected-item">accu;batterij <span class="remove-choice fa fa-close"></span></span> 
    <span class="selected-item">afwerking <span class="remove-choice fa fa-close"></span></span> 
    <span class="selected-item">adapter <span class="remove-choice fa fa-close"></span></span> 
    <span class="selected-item">one more item to make this stuff wrap <span class="remove-choice fa fa-close"></span></span> 
    </div> 
</div> 

のCss：

.selected-list { 
    border: 1px #cacaca solid; 
    padding: 0.5rem; 
    min-height: 3.4375rem; 
    line-height: calc(2.4375rem - 2px); 
    margin-bottom: 1rem; 
} 

.selected-item { 
    padding: 0.5rem; 
    background-color: rgb(240, 240, 255); 
    border-radius: 0.2rem; 
    border: 1px blue solid; 
    white-space: nowrap; 
} 

.remove-choice { 
    cursor: pointer; 
    color: blue; 
} 

https://jsfiddle.net/346wdoyw/1/

ですが、なぜでしょうか？どうすれば修正できますか？

Answer 1

なぜこのようなことが起こりますか？

<span>タグはデフォルトでdisplay:inlineです。プレーンテキストと同様に、デフォルトでは文のように表示されます。

どうすれば修正できますか？

display:inline-blockに設定し、それを、それはより多くのそれは文章のグラウンドとして表示されますblockもinline、のようなものです。 width/height、padding/marginも正しく反映されています。

white-space:nowrapの有無にかかわらず、より多くのテストを行い、その違いをより明確に確認できます。

.selected-item { 
    display: inline-block; 
    ... 
} 

jsFiddle

Answer 2

このコードを試してください：

.selected-item { 
    display: inline-block; 
    vertical-align: top; 
    padding: 0.1rem; // modify this as per your needs.. 
    margin: 0 5px 5px 0; // modify this as per your needs.. 
}