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

相关推荐
喝拿铁写前端15 分钟前
智能系统的冰山结构
前端
z_mazin20 分钟前
JavaScript逆向魔法:Chrome开发者工具探秘之旅
javascript·chrome·爬虫
绿草在线24 分钟前
Mock.js虚拟接口
开发语言·javascript·ecmascript
时光追逐者1 小时前
在 Blazor 中使用 Chart.js 快速创建数据可视化图表
开发语言·javascript·信息可视化·c#·.net·blazor
无奈何杨1 小时前
扣子coze的AI工作流搭建技术,开源项目FlowGram流程搭建引擎
前端
ElasticPDF-新国产PDF编辑器1 小时前
Angular 项目 PDF 批注插件库在线版 API 示例教程
前端·pdf·angular.js
hz.ts1 小时前
Angular 国际化
javascript·ecmascript·angular.js
6武71 小时前
Vue 数据传递流程图指南
前端·javascript·vue.js
夏天想1 小时前
vant4+vue3上传一个pdf文件并实现pdf的预览。使用插件pdf.js
开发语言·javascript·pdf·vant