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

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

javascript 复制代码
<div id="box">
   <p>
     <span>按钮</span>
     <span>测试文字文字文字测试文字文字文字</span>
     <span>看这里</span>
   </p>
 </div>
javascript 复制代码
 #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布局

相关推荐
mCell4 小时前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip4 小时前
Node.js 子进程:child_process
前端·javascript
excel7 小时前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel8 小时前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼10 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping10 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙11 小时前
[译] Composition in CSS
前端·css
白水清风11 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix11 小时前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户221520442780011 小时前
new、原型和原型链浅析
前端·javascript