行内(行间块状display:inline-block)元素,当设置overflow:hidden之后，元素出现不对齐的情况

当设置overflow:hidden之后，元素出现不对齐的情况

原因：行内(行间块状display:inline-block)元素的默认对齐方式是基线对齐即（vertical-align：baseline），设置设置overflow不为visible之后改变了他的默认对齐方式为下边距边缘；其他行内元素依然还是基线对齐就会出现下沉的视觉效果
解决方法：
1、重新设置所有行内元素(inline-block)的对齐方式为vertical-align:top或者bottom
2、设置所有的行内元素(inline-block)的overflow不为visible
3、设置flex布局
1、重新设置所有行内元素(inline-block)的对齐方式为vertical-align:top或者bottom
span.qw{
display: inline-block;
white-space: nowrap;
width:100px;
overflow: hidden;
text-overflow:ellipsis;
/ vertical-align: bottom; /
}
2、设置所有的行内元素(inline-block)的overflow不为visible
span{
display: inline-block;
overflow: hidden;
}
<span>文科妈妈</span>
<span class="qw">12131可是快乐健康产生的速度可能流口水的农村</span>
<span>去我看看</span></p>