強制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;

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