纯用CSS实现，主要采用代码
overflow:hidden;
text-overflow:ellipsis;//这是让文本溢出后，显示成省略号。
white-space:nowrap;//禁止自动换行
栗子html
<div class="div1"> ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
</div>
栗子的css
.div1{
width: 100px;
height: 100px;
border:2px solid black;
overflow:hidden;
text-overflow: ellipsis;
/*-webkit-text-overflow:ellipsis;*/
white-space: nowrap;
}
在ie6~8和chrome下显示都是：
鼠标悬停时显示被省略的内容：
设置CSS
.div1:hover{
overflow:visible;
}
另外：由于这个只是针对溢出文本的效果。所以如果div内是p元素，那么溢出的p元素不会显示成...。至少在ie8+,和chrome中，p元素并不会变成省略号，而是直接被裁剪掉了。
用ietester测试ie6、7则会显示溢出的P元素为省略号。
所以，若想要P元素溢出后也显示成省略号效果，需要单独给p元素设置over-flow:hidden;text-overflow:ellipsis;
ps:关于text-overflow的值：有三个值：
clip|ellipsis|string 默认clip
| 值 | 描述 | |
|---|---|---|
| clip | 修剪文本。 | |
| ellipsis | 显示省略符号来代表被修剪的文本。 | |
| string | 使用给定的字符串来代表被修剪的文本。 |