Warum beeinflusst der Überlauf die Höhe und wie kann ich das in diesem Beispiel beheben?

Question

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

Code:

HTML: Hallo Welt

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

Hier versuche ich, zwei Spannweiten nebeneinander zu erstellen , nur einer von ihnen hat Überlauf: versteckt und die andere sollten keinen Überlauf haben: versteckt. Aus irgendeinem Grund wirkt sich der Überlauf: versteckt auf die Höhen aus und sie sind nicht ausgerichtet - selbst wenn ich eine explizite Höhe verwende.

Irgendeine Idee, wie man das repariert?

Answer 1

Dies kann auch behoben werden, indem vertical-align: top der CSS-Regel span hinzugefügt wird. Der Grund, dass beide Regeln das Problem beheben, besteht darin, dass sie die vertikale Ausrichtung der divs erzwingen.

Wenn Sie eine vertical-align Regel hinzufügen, werden Sie möglicherweise nicht die Elemente erhalten, die aus der Löschung folgen.

Answer 2

Hallo Ich habe gerade aktualisiert Ihre Spannweite zu schweben: links und es funktioniert. Es ist nicht der Überlauf, sondern die Tatsache, dass die Spannen nicht schweben, dass sie falsch ausgerichtet sind.

Answer 3

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