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

相关推荐
技术砖家--Felix19 分钟前
Spring Boot Web开发篇:构建RESTful API
前端·spring boot·restful
yume_sibai1 小时前
TS 常用内置方法
前端·javascript·typescript
新知图书1 小时前
ArkTS语言、基本组成与数据类型
前端·javascript·typescript
西西学代码1 小时前
Flutter---个人信息(1)---实现简单的UI
开发语言·javascript·flutter
嘗_2 小时前
手写自己的小型react
前端·javascript·react.js
嘀咕博客2 小时前
h5游戏免费下载:HTML5拉杆子过关小游戏
前端·游戏·html5
Moonbit2 小时前
MoonBit 推出 LLVM Debugger,核心用户数破十万
前端·编程语言·llvm
zuo-yiran2 小时前
vue div标签可输入状态下实现数据双向绑定
前端·javascript·vue.js
qq_316837752 小时前
使用leader-line-vue 时垂直元素间距过小连线打转的解决
前端·javascript·vue.js
天天向上10242 小时前
vue3使用ONLYOFFICE 实现在线Word,Excel等文档
前端·javascript·html