Fiddle: https://jsfiddle.net/wa51kdh7/
Code:
HTML: Hello world
<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;
}
Here I am trying to create two spans next to each other, only one of them has overflow: hidden and the other shouldn't have overflow: hidden. For some reason the overflow: hidden affects the heights and they don't line up - even when I use an explicit height.
Any idea how to fix this?
This can also be fixed by adding vertical-align: top
to the span
's CSS rule. The reason that both rules fix the problem is that they enforce the vertical alignment of the divs.
Adding a vertical-align
rule will keep you from potentially having the elements that follow from needing to be cleared.
Hi I just updated your span
to float: left
and it works. It's not the overflow
but the fact the span
s aren't floated that they are misaligned.
span {
display: inline-block;
margin: 0;
padding: 0;
line-height: 16px;
font-size: 16px;
height: 16px;
vertical-align: middle;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.