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>
相关推荐
IAtlantiscsdn12 小时前
Redis7底层数据结构解析
前端·数据结构·bootstrap
小枫编程12 小时前
Spring Boot 与前端文件上传跨域问题:Multipart、CORS 与网关配置
前端·spring boot·后端
uhakadotcom12 小时前
入门教程:如何编写一个chrome浏览器插件(以jobleap.cn收藏夹为例)
前端·javascript·面试
捡芝麻丢西瓜12 小时前
SPM 之 混编(OC、Swift)项目保姆级教程(Swift Package Manager)
前端
我是天龙_绍12 小时前
cdn是个啥?
前端
南雨北斗12 小时前
VSCode三个TS扩展工具介绍
前端
若无_12 小时前
了解 .husky:前端项目中的 Git Hooks 工具
前端·git
ze_juejin13 小时前
前端发送语音方式总结
前端
给月亮点灯|13 小时前
Vue3基础知识-Hook实现逻辑复用、代码解耦
前端·javascript·vue.js
Simon_He13 小时前
一款适用于 Vue 的高性能流式 Markdown 渲染器,源自我们的 AI 聊天机器人
前端·vue.js·markdown