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