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