设置text-overflow為ellipsis后引起的文本对齐问题

最近在做网页的时候用到了文本溢出隐藏的功能,但是出现了一些小问题,下面先放上示例代码吧。

1
2
3
4
<p>
<span class="left">Hello Hello Hello</span>
<span class="right">xhaha</span>
</p>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
p {
width: 40%;
margin: 20px auto;
font-size: 50px;
}
span {
display: inline-block;
}
.left {
width:40%;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.right{
/* overflow: hidden; */
}

查看DEMO

按以上代码最后得到的显示效果是,span.leftspan.right没有对齐。右边的会沉下去点,这个在demo里面可以看到。

然后我就想这是什么原因造成的,在调试器里勾选掉.leftoverflow: hidden后,就显示正常了(当然,省略号儿也没了),然后我就捉摸着这是不是BFC的问题,因为平时自己清除浮动什么的,都喜欢用overflow:hidden来触发BFC,以便包裹元素的来着。当然了,给.right设置overflow: hidden或者float: right之后,也确实会显示正常(float: right会让文字右浮动,不过对齐的效果确实是达到了),之后我就在BFC的问题上纠结了好久,因为MDN上说了,inline-block元素本身就是会触发BFC的,那么前面所说的和BFC有关,就不那么准确了。

后来在stackoverflow上得到了答案,对span加上一个vertical-align: top然后就会对齐了。

至于原因,是因为inline-block元素默认的对齐方式是基线对齐,那么基线是什么呢? 如果一个inline-block盒子是空的,或者说他的overflow属性不为visible, 那么他的基线就是其下边距边缘,否则的话,就是其内部最后一个内联元素的基线(文字就是内联元素咯。。)

如下所示:

The baseline of an ‘inline-block’ is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its ‘overflow’ property has a computed value other than ‘visible’, in which case the baseline is the bottom margin edge.

那么,span.left的基线就是那个背景色的最下边,而右边span.right的基线,就是字符x的底部,基线对齐的意思,就是这两条线是在同一水平线上的,所以,右边的元素为了对齐,就要往下沉咯。现在我们目测的话,也是这两条线貌似也确实是在一条水平线上的。

所以,设置了vertical-align: top之后,改变了其默认对齐方式,所以就对齐咯。

然后使用右浮动之后,因为浮动会使盒子的display属性变为block,所以就不是inline-block元素,自然就不会受到前面的规则的影响了。

之后是使用overflow: hidden,这个属性使得inline-block元素的基线发生了改变,变得和左边元素一样,所以也能对齐。

最后来个小总结吧: 好的文章一定要多读几遍,每一遍都会有所收获。

参见:
stackoverflow- inline-block元素垂直对齐问题
张鑫旭-CSS深入理解vertical-align和line-height的基友关系