父级元素包含几个行内元素
<div id="box"><p><span>按钮</span><span>测试文字文字文字测试文字文字文字</span><span>看这里</span></p></div>
#box p{width: 800px;font-size: 30px;}#box p span{display: inline-block;box-sizing: border-box;/*vertical-align:top/bottom*/}#box p span:nth-child(2){padding-left: 10px;width: 350px;/* overflow: hidden;white-space: nowrap;text-overflow: ellipsis;*/}
正常显示，且在同一行；
当设置overflow:hidden之后，元素出现不对齐的情况
原因：行内元素的默认对齐方式是基线对齐即（vertical-align：baseline），设置设置overflow不为visible之后改变了他的默认对齐方式为下边距边缘；其他行内元素依然还是基线对齐就会出现下沉的视觉效果
解决方法：
1、重新设置所有行内元素的对齐方式为vertical-align:top或者bottom
2、设置所有的行内元素的overflow不为visible
3、设置flex布局
