強制span不換行

      對於上一篇提到的overflow的問題我好像搞懂一些了。事情大概是這個樣子的：若是用了float屬性，那麼元素就會脫離文本的束縛，沒法無天起來，這確定是猿類沒法忍受的。要想讓他們乖乖就範，要麼用清除浮動，要麼用overflow屬性。這是兩種解決方法，不須要同時使用。但有一點要特別注意的，overflow：hidden這句話必定要寫在父容器裏纔有效果。重要的事情說三遍：父容器~~父容器~~父容器~~。

      好了，言歸正傳。今天要解決的問題是，限制span標籤不換行，並使超出的部分以點號代替。

      需求效果圖：  

      實現代碼以下：

1. HTML代碼

<div>
    <span>費用自理</span>
    <span class="spanStyle">80000000</span> 
　　<span><img src="../img/tip.png"></span></div>

固然，字體顏色樣式按需求而定，此處只講跟換行設置相關的。

      2. css代碼

.spanStyle{  
      white-space: nowrap;  /*強制span不換行*/
      display: inline-block;  /*將span當作塊級元素對待*/
      width: 32px;  /*限制寬度*/
      overflow: hidden;  /*超出寬度部分隱藏*/
      text-overflow: ellipsis;  /*超出部分以點號代替*/
      line-height: 0.9;  /*數字與以前的文字對齊*/
}

至此，功能實現。

      那麼如今再來理一下這件事的邏輯。要想讓span不換行，而且以點號代替超出的內容，則確定要有相應的代碼；超出長度不換行，那麼這個span怎麼着也要有個長度吧！因此要限定寬；但是span不吃這一套，因此要把它變成塊級元素（至於用inline-block仍是用block視狀況而定，此處個人span後面還要排列一張圖片，所以我用了inline-block）。要作的事情已經結束啦，但是發現限定爲塊級元素後，數字與以前的文字對不牢了，因此靈機一動，調整了一下行高。不知道這個作法是否是主流，不過能夠對其了。後來發現以後的圖片與數字也對不齊了，調整一下圖片對齊方式就能夠了。圖片對齊默認的應該是中部對齊，我將其調整成了底部對齊，也就是這句代碼：

vertical-align: bottom;

  這個問題圓滿解決，收工。