阿里实习电面时遇到的坑，当时被问时有印象，但忘了是用哪些属性.....
- 可以实现如题功能的代码如下
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/
