css 布局出现无法去除的空白

案件介绍:在没有设置任何的css样式的情况下 文字顶部出现无法去除的空白

源代码

html 复制代码
<div @click="onClick" >
	<div class="tableTextButton--container">
    </div>
     <Icon v-if="loading || thisLoading" type="ios-loading" />
     打印
</div>

原因

  1. 在控制台中看到文字的上方有空白的一行
  2. 往div的父级层一层层往上找 可以看到在 class="vxe-cell" 的div 设置了一个属性 white-space: pre-line;
  • 查阅资料如下
  • 大概意思就是white-space: pre-line;会保留盒子内部的换行符 因此文字上方的换行被保留了下来 出现了空白

解决:

方案一:取消保留换行,将white-space: pre-line;的设置覆盖掉或者删除掉

css 复制代码
.vxe-cell{
	white-space: unset;
}

方案二:避免出现换行,给文字加上一个父盒子包裹起来

html 复制代码
<div @click="onClick" >
	<div class="tableTextButton--container">
    </div>
     <Icon v-if="loading || thisLoading" type="ios-loading" />
     <template>打印</template>
</div>
相关推荐
@PHARAOH22 分钟前
WHAT - Electron 系列(一)
前端·javascript·electron
半句唐诗44 分钟前
设计与实现高性能安全TOKEN系统
前端·网络·安全
小满zs1 小时前
React-router v7 第二章(路由模式)
前端·react.js
yanxy5121 小时前
【TS学习】(18)分发逆变推断
前端·学习·typescript
大莲芒1 小时前
react 15-16-17-18各版本的核心区别、底层原理及演进逻辑的深度解析--react18
前端·javascript·react.js
Hellyc1 小时前
SpringMVC响应数据:页面跳转与回写数据
java·前端·学习
CaveShao2 小时前
前端开发中常见的 SEO 优化
前端·seo
Hyyy2 小时前
ElementPlus按需加载 + 配置中文避坑(干掉1MB冗余代码)
前端·javascript·面试
Summer_Xu2 小时前
模拟 Koa 中间件机制与洋葱模型
前端·设计模式·node.js
李鸿耀2 小时前
📦 Rollup
前端·rollup.js