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