文本超出容器样式

DOM结构代码如下

<div class="clip"> 

  不显示省略号，文本溢出不显示；不显示省略号，文本溢出不显示
 </div> 
 <div class="ellipsis"> 
 文本溢出时显示省略标记；文本溢出时显示省略标记；
 </div>

CSS代码如下

.clip,.ellipsis{overflow:hidden; white-space:nowrap; width:200px;background:#09c;margin-bottom: 20px;}

.clip{text-overflow:clip; }
.ellipsis{text-overflow:ellipsis;}

实现效果如下图