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

阿晴熙熙

已于 2024-06-28 15:23:27 修改

阅读量490

点赞数 1

分类专栏：搬砖日记 css 文章标签： css 前端

于 2024-06-28 15:21:24 首次发布

本文链接：https://blog.csdn.net/weixin_46221198/article/details/140042959

版权

搬砖日记同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

css

7 篇文章 0 订阅

订阅专栏

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

源代码

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

原因

在控制台中看到文字的上方有空白的一行
往div的父级层一层层往上找可以看到在 class=“vxe-cell” 的div 设置了一个属性 white-space: pre-line;

查阅资料如下
大概意思就是white-space: pre-line;会保留盒子内部的换行符因此文字上方的换行被保留了下来出现了空白

解决：

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

.vxe-cell{
	white-space: unset;
}

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

<div @click="onClick" >
	<div class="tableTextButton--container">
    </div>
     <Icon v-if="loading || thisLoading" type="ios-loading" />
     <template>打印</template>
</div>