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>
相关推荐
一tiao咸鱼几秒前
如何简单使用 prompt
前端·aigc
cdbqss15 分钟前
VB.net编写的身份证类
前端·.net
骑自行车的码农23 分钟前
React短文系列 遍历fiber树 App的创建
前端·react.js
AskSky27 分钟前
为了搞一个完美的健身APP,我真是费尽心机
前端
斯~内克32 分钟前
基于Vue.js和PDF-Lib的条形码生成与批量打印方案
前端·vue.js·pdf
阴阳怪气乌托邦33 分钟前
别再啃OA代码了!低代码"搭积木"式搞数智化,我直接少写500行
前端·低代码
beelan37 分钟前
v-on的思考
前端
山河木马40 分钟前
前端学习C++之:.h(.hpp)与.cpp文件
前端·javascript·c++
用户92724725021940 分钟前
PHP + CSS + JS + JSON 数据采集与展示系统,支持伪静态
前端
努力只为躺平44 分钟前
一文搞懂 Promise 并发控制:批量执行 vs 最大并发数,实用场景全解析!
前端·javascript