阿里實習電面時遇到的坑，當時被問時有印象，但忘了是用哪些屬性.....

- 可以實現(xiàn)如題功能的代碼如下

HTML部分

<div>
   想在一瞬間變成天邊半明半暗的云
</div>

<div id="test">   
   想在一瞬間變成天邊半明半暗的云
</div>

CSS部分

#test{
        width:100px;
        overflow:hidden;
        white-space:nowrap;
        text-overflow:ellipsis;
}

- 效果圖如下

- 代碼解釋：

HTML部分：

第一個<div>是文本沒有溢出的情況，作為第二個<div>的對比；
第二個<div>的內(nèi)容和第一個一樣，但在此<div>上設置了溢出的文本被替換為省略號（...）的效果。

CSS部分：
width:100px; 　　　　指定文本能顯示的寬度為100px；
overflow:hidden; 　　　超出width設定寬度的文本被隱藏；
white-space:nowrap; 　 　設置文本不會換行，直到遇到<br>標簽為止；
text-overflow:ellipsis; 　當文本溢出包含元素時，用省略號（...）代替。

- 對white-space和text-overflow 兩個屬性不是很熟悉，簡單解釋一下

• white-space設置如何處理元素內(nèi)的空白
  *屬性值及含義
  　　normal默認值，空白會被瀏覽器忽略；
  　　pre 空白會被瀏覽器保留，其行為方式類似于HTML中的<pre>標簽
  　　nowrap文本不會換行，文本會在同一行上繼續(xù)，直到遇到 <br>標簽為止
  　　pre-wrap保留空白符，但是正常地進行換行
  　　pre-line合并空白符系列，但是保留換行符
  　　inherit從父元素繼承white-space屬性的值

• text-overflow 規(guī)定當文本溢出包含元素時發(fā)生的事情
  *屬性值及含義
  　　clip修剪文本
  　　ellipsis用省略號（...）代替溢出的文本
  　　string使用給定的字符串代替溢出的文本

這里沒有考慮瀏覽器的兼容性，如果需要，請參考張鑫旭大神的博客

http://www.zhangxinxu.com/wordpress/2009/09/%E5%85%B3%E4%BA%8E%E6%96%87%E5%AD%97%E5%86%85%E5%AE%B9%E6%BA%A2%E5%87%BA%E7%94%A8%E7%82%B9%E7%82%B9%E7%82%B9-%E7%9C%81%E7%95%A5%E5%8F%B7%E8%A1%A8%E7%A4%BA/