fiddle :https://jsfiddle.net/wa51kdh7/
代码:
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;
}
在这里,我试图创建两个彼此相邻的跨度,其中只有一个有溢出:隐藏,另一个不应该有溢出:隐藏。出于某种原因,溢出:隐藏会影响高度并且它们不会对齐 - 即使我使用明确的高度也是如此。
知道如何解决这个问题吗?
最佳答案
这也可以通过将 vertical-align: top
添加到 span
的 CSS 规则来解决。两条规则解决问题的原因是它们强制 div 的垂直对齐。
添加 vertical-align
规则将使您避免可能需要清除后面的元素。
关于html - 为什么 overflow hidden 会影响高度,在此示例中我该如何解决?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32190967/