Perché l'overflow nascosto influisce sull'altezza e come posso risolverlo in questo esempio?

Question

Fiddle: https://jsfiddle.net/wa51kdh7/

Codice:

HTML: Ciao mondo

<span class="span2"> 
    Goodbye cruel world 
</span> 

CSS:

span { 
    display: inline-block; 
    margin: 0; 
    padding: 0; 
    line-height: 16px; 
    font-size: 16px; 
    height: 16px; 
} 

.span1 { 
    background-color: lightblue; 
} 

.span2 { 
    background-color: pink; 
    overflow: hidden; 
    width: 130px; 
    text-overflow: ellipsis; 
} 

Qui sto cercando di creare due campate uno accanto all'altro , solo uno di loro ha overflow: nascosto e il altro non dovrebbe avere overflow: nascosto. Per qualche motivo l'overflow: nascosto colpisce le altezze e non si allineano - anche quando uso un'altezza esplicita.

Qualche idea su come risolvere questo problema?

Answer 1

Questo può anche essere risolto aggiungendo vertical-align: top alla regola CSS span. Il motivo per cui entrambe le regole risolvono il problema è che applicano l'allineamento verticale dei div.

L'aggiunta di una regola vertical-align impedirà potenzialmente di eliminare gli elementi che seguono.

Answer 2

Ciao, ho appena aggiornato lo span per farlo fluttuare: a sinistra e funziona. Non è l'overflow, ma il fatto che gli span non siano flottanti sono disallineati.

Answer 3

span { 
    display: inline-block; 
    margin: 0; 
    padding: 0; 
    line-height: 16px; 
    font-size: 16px; 
    height: 16px; 
    vertical-align: middle; 
}