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

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

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

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

   
   
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

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

  .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)

   
   
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

通过给父元素设置 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>

   
   
  • 1
  • 2
  • 3
  • 4
  • 5
//修改后
    <div class="bulletin-wrapper">
      <span class="bulletin-title"></span><span class="bulletin-text">{
    
    {seller.bulletin}}</span>
    </div>

   
   
  • 1
  • 2
  • 3
  • 4
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值