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

相关推荐
未来之窗软件服务1 小时前
自己写算法(九)网页数字动画函数——东方仙盟化神期
前端·javascript·算法·仙盟创梦ide·东方仙盟·东方仙盟算法
你的人类朋友2 小时前
什么是断言?
前端·后端·安全
FIN66683 小时前
昂瑞微:实现精准突破,攻坚射频“卡脖子”难题
前端·人工智能·安全·前端框架·信息与通信
椎4953 小时前
苍穹外卖前端nginx错误之一解决
运维·前端·nginx
@。1243 小时前
对于灰度发布(金丝雀发布)的了解
开发语言·前端
我有一棵树3 小时前
前端图片加载失败、 img 出现裂图的原因全解析
前端
FIN66683 小时前
昂瑞微冲刺科创板:硬科技与资本市场的双向奔赴
前端·人工智能·科技·前端框架·智能
im_AMBER3 小时前
杂记 14
前端·笔记·学习·web
牧杉-惊蛰3 小时前
disable-devtool 网络安全 禁止打开控制台
前端·css·vue.js
C+ 安口木3 小时前
vue中监听window某个属性被添加或值的变化
前端·javascript·vue.js