如何解决两个inline-block并排出现空白间隙的情况&&如何进行文字溢出设置

本文介绍如何使用CSS的overflow、white-space和text-overflow属性处理文本溢出,实现省略号显示效果,以及解决inline-block元素间的空白间隙问题。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.如何进行文字溢出设置

在这里插入图片描述
有时候·我们想实现如上效果,在如果文字内容超出元素框宽度,就以省略号的形式出现,而且只出现一行文字。这是我们需要给父元素设置overflow,white-space以及text-overflow的效果。
点击了解white-space属性
点击了解text-overflow属性
点击了解overflow属性

<div class="bulletin-wrapper">
  <span class="bulletin-text">
	      粥品香坊其烹饪粥料的秘方源于中国千年古法,
	      在融和现代制作工艺,由世界烹饪大师屈浩先生领衔研发。坚守纯天然、
	      0添加的良心品质深得消费者青睐,发展至今成为粥类的引领品牌。
	      是2008年奥运会和2013年园博会指定餐饮服务商。
  </span>
</div>

在这里插入图片描述
设置前:如果不进行任何设置,就会出现上图中的情况,部分文字被截取,影响视图效果。
设置后

  .bulletin-wrapper
    height 28px
    line-height 28px
    padding 12px 0 12px 0
    white-space nowrap
    overflow hidden
    text-overflow ellipsis
    background rgba(7,17,27,0.2)

通过给父元素设置 overflow: hidden, text-overflow: ellipsis;background:rgba(7,17,27,0.2)。就可以实现用省略号代替溢出效果
在这里插入图片描述
重点:该设置在一种情况下会出现bug,有时候为了解决两个inline-block并排出现空白间隙的问题,我们会给父元素设置font-size=0的情况,但这会让“…”消失,如下图

在这里插入图片描述
在这里插入图片描述
如果出现这种情况,我们就找其他的办法来解决空白间隙的情况,鹅肉使用inline-block。

2.解决两个inline-block并排出现空白间隙的情况

两个inline-block框并排时容易出现空白间隙,影响整个页面布局,这里提出几种几种解决办法

方法一

两个行内框的父元素设置 font-size:0 的属性,就可以解决,如果行内框有文字要展示,可以在给行内框设置字体大小。

方法二

只需要在编写标签时,将两个标签之间的空隙设置为0

//修改前
    <div class="bulletin-wrapper">
      <span class="bulletin-title"></span>
      <span class="bulletin-text">{{seller.bulletin}}</span>
    </div>
//修改后
    <div class="bulletin-wrapper">
      <span class="bulletin-title"></span><span class="bulletin-text">{{seller.bulletin}}</span>
    </div>
<template> <div class="taskBox"> <div v-for="(item,index) in list" class="itemList"> <div class="top">【{{ item.userTypeName }}】{{ item.taskName }}</div> <div class="centre"> <p> <span><img :src="icon1"/></span> <span>起止时间</span> <span>:{{ item.startTime }}~{{ item.endTime }}</span> </p> <p> <span> <img :src="icon2"/></span> <span>适用范围</span> <span>:{{ item.useRange }}</span> </p> <p> <span> <img :src="icon3"/></span> <span>说明</span> <span>:{{ item.taskRemark }}</span> </p> </div> <div class="bottom"> <div class="statusBox statusBox1" v-if="item.status=='正在进行'">{{ item.status }}</div> <div class="statusBox statusBox2" v-else>{{ item.status }}</div> <div class="FillingBox" @click="goFillingFun(item.id)">快速填报&nbsp></div> </div> </div> </div> </template> <script setup> import {useRoute, useRouter} from 'vue-router' import {post} from "@/frame/request/http"; import {ref} from "vue"; import icon1 from '../../assets/image/taskFillingIcon1.png' import icon2 from '../../assets/image/taskFillingIcon2.png' import icon3 from '../../assets/image/taskFillingIcon3.png' let router = useRouter() function goFillingFun(id) { router.push('/taskFilling?id=' + id) } let list = ref([]) const search = ref({ pageNum: 1, pageSize: 2, total: 0, }); const currentDate = new Date(); // 状态判断函数 function getTaskStatus(startDateStr, endDateStr, currentDate) { // 将字符串转换为日期对象 const startDate = new Date(startDateStr); const endDate = new Date(endDateStr); // 清除时间部分,只比较日期 startDate.setHours(0, 0, 0, 0); endDate.setHours(0, 0, 0, 0); const current = new Date(currentDate); current.setHours(0, 0, 0, 0); if (current < startDate) { return "未开始"; } else if (current > endDate) { return "已过期"; } else { return "正在进行"; } } function getList() { post('/system/module/task/set/teacherPageList', search.value).then(res => { list.value = res.list list.value.forEach(task => { const status = getTaskStatus(task.startTime, task.endTime, currentDate); task.status = status; }); console.log(list.value, 78) }) } getList() </script> <style scoped lang="less"> .taskBox { height: 235px; width: 100%; display: flex; flex-wrap: wrap; gap: 24px; } .itemList { flex: 1; background-color: white; border-radius: 10px; padding: 24px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between; .top { font-size: 18px; font-weight: bolder; } .centre { height: 114px; width: 100%; background-color: #f7f9fc; padding: 20px; display: flex; flex-direction: column; justify-content: space-between; box-sizing: border-box; border-radius: 5px; p { display: flex; //flex-direction: column; //justify-content: center; span { &:nth-child(1) { display: flex; justify-content: center; align-items: center; img { width: 18px; height: 18px; margin-right: 5px; } } &:nth-child(2) { font-size: 14px; color: #666666; width: 72px; display: inline-block; text-align: justify; text-align-last: justify; } &:nth-child(3) { font-size: 14px; color: #333333; font-weight: 500; } } } } .bottom { display: flex; justify-content: space-between; .statusBox { width: 100px; height: 24px; line-height: 24px; display: flex; justify-content: center; color: white; border-radius: 5px; } .statusBox1 { background-image: linear-gradient(to right, #487ff7, #ffffff); } .statusBox2 { background-image: linear-gradient(to right, #cecece, #ffffff); } .FillingBox { color: #427bf7; cursor: pointer; } } } </style>优化一下,把适用范围和说明改成一行显示,超出显示省略号
07-18
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值