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>
相关推荐
袁煦丞5 小时前
企业微信开发者的‘跨网穿梭门’:cpolar内网穿透实验室第499个成功挑战
前端·程序员·远程工作
Simon_He5 小时前
vue-markdown-renderer:比 vercel streamdown 更低 CPU、更多节点支持、真正的流式渲染体验
前端·vue.js·markdown
小桥风满袖5 小时前
极简三分钟ES6 - 模块化
前端·javascript
练习时长一年5 小时前
自定义事件发布器
java·前端·数据库
IT_陈寒6 小时前
SpringBoot高并发优化:这5个被忽视的配置让你的QPS提升300%
前端·人工智能·后端
光影少年6 小时前
css优化都有哪些优化方案
前端·css·rust
BillKu6 小时前
npm 安装命令中关于 @ 的讲解,如:npm install @vue-office/docx vue-demi
前端·vue.js·npm
yangzhi_emo6 小时前
ES6笔记4
前端·笔记·es6
萌萌哒草头将军6 小时前
Node.js v24.8.0 新功能预览!🚀🚀🚀
前端·javascript·node.js
超人不会飛6 小时前
大模型应用 Vue H5 模板:快速落地流式交互与富文本渲染的开箱方案
前端·vue.js·github