css设overflow:hiden行内元素会发生偏移的现象

父级元素包含几个行内元素

<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布局