溢出文本用省略号代替的方法

阿里实习电面时遇到的坑，当时被问时有印象，但忘了是用哪些属性.....

- 可以实现如题功能的代码如下

---

HTML部分

<div>
   想在一瞬间变成天边半明半暗的云
</div>

<div id="test">   
   想在一瞬间变成天边半明半暗的云
</div>

CSS部分

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

---

- 效果图如下

---

- 代码解释：

HTML部分：

第一个<div>是文本没有溢出的情况，作为第二个<div>的对比；
第二个<div>的内容和第一个一样，但在此<div>上设置了溢出的文本被替换为省略号（...）的效果。

CSS部分：
width:100px; 　　　　指定文本能显示的宽度为100px；
overflow:hidden; 　　　超出width设定宽度的文本被隐藏；
white-space:nowrap; 　 　设置文本不会换行，直到遇到<br>标签为止；
text-overflow:ellipsis; 　当文本溢出包含元素时，用省略号（...）代替。

---

- 对white-space和text-overflow 两个属性不是很熟悉，简单解释一下

• white-space设置如何处理元素内的空白
  *属性值及含义
  　　normal默认值，空白会被浏览器忽略；
  　　pre 空白会被浏览器保留，其行为方式类似于HTML中的<pre>标签
  　　nowrap文本不会换行，文本会在同一行上继续，直到遇到 <br>标签为止
  　　pre-wrap保留空白符，但是正常地进行换行
  　　pre-line合并空白符系列，但是保留换行符
  　　inherit从父元素继承white-space属性的值

• text-overflow 规定当文本溢出包含元素时发生的事情
  *属性值及含义
  　　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/