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>
相关推荐
DN金猿14 分钟前
使用npm install或cnpm install报错解决
前端·npm·node.js
丘山子15 分钟前
一些鲜为人知的 IP 地址怪异写法
前端·后端·tcp/ip
志存高远6627 分钟前
Kotlin 的 suspend 关键字
前端
www_pp_39 分钟前
# 构建词汇表:自然语言处理中的关键步骤
前端·javascript·自然语言处理·easyui
天天扭码1 小时前
总所周知,JavaScript中有很多函数定义方式,如何“因地制宜”?(ˉ﹃ˉ)
前端·javascript·面试
一个专注写代码的程序媛1 小时前
为什么vue的key值,不用index?
前端·javascript·vue.js
장숙혜1 小时前
ElementUi的Dropdown下拉菜单的详细介绍及使用
前端·javascript·vue.js
火柴盒zhang2 小时前
websheet之 编辑器
开发语言·前端·javascript·编辑器·spreadsheet·websheet
某公司摸鱼前端2 小时前
uniapp 仿企微左边公司切换页
前端·uni-app·企业微信
WKK_2 小时前
uniapp自定义封装tabbar
前端·javascript·小程序·uni-app