Zeilenumbruch schneidet Inline-Element Grenze

Question

Ich habe eine Liste von Inline-Elementen mit Padding und Rahmen. Wenn ein Element umbrochen wird, wird das letzte Element der vorherigen Zeile abgeschnitten.

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/

Warum ist das passiert? Wie kann ich es reparieren?

Answer 1

Warum passiert das?

Der <span> Tag ist display:inline standardmäßig wird es wie ein Satz gemacht, genau wie der Klartext.

Wie kann ich es beheben?

Set es display:inline-block, dann ist es eher wie ein block sondern auch inline, es als Grund von Sätzen angezeigt wird. Es respektiert auch width/height, padding/margin korrekt.

Sie können weitere Tests mit/ohne white-space:nowrap durchführen, um die Unterschiede deutlicher zu sehen.

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

jsFiddle

Answer 2

Bitte versuchen Sie diesen Code:

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