text-overflow修剪文本，以省略号显示

overflow: hidden;  必须设置，不然无法修剪文本

white-space: nowrap;  规定段落中的文本不进行换行

text-overflow: ellipsis;  当文本溢出包含元素时显示省略号

 <div>文本过长部分会被截断文本过长部分会被截断文本过长部分会被截断</div>

 <style type="text/css">
 div{
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
   width: 200px;
   border:1px solid #ccc;
 }
 </style>

注意：文本的修剪不受高度影响，只要文本长度超过容器宽度就会被修剪，不会换行。