多行文本显示实现text-overflow ellipsis省略号
对于只有一行的内容，实现超出显示范围内的内容用省略号显示的效果，示例代码如下
<style>
.ellips{position:relative;width:100px;height:60px;line-height:20px;overflow:hidden;background:#eee}
.ellips .dot{position:absolute;right:0px;bottom:0px;height:20px;background:#fff}
</style>
<div class="ellips"><div class="dot">...</div>div relative定位定高定宽，内部放个个浮动层浮动在右下角，内容为覆盖最后的文字</div>
但是设置了div高度想显示多行数据时，并没换行，只显示第一行，超出显示范围的内容用省略号代替了。
<style>
.ellips{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;width:200px;height:60px;line-height:20px}
</style>
<div class="ellips">单行显示实现超出显示范围内的内容用省略号显示的效果可</div>
要显示多行并且超出内容部分用省略号代替，可以div容器relative定位定高定宽，内部放个浮动层浮动在右下角，内容为省略号，用来覆盖最后的文字，不过最后显示的一个文字有可能被遮盖住，漏点出来
<style>
.ellips{position:relative;width:100px;height:60px;line-height:20px;overflow:hidden;background:#eee}
.ellips .dot{position:absolute;right:0px;bottom:0px;height:20px;background:#fff}
</style>
<div class="ellips"><div class="dot">...</div>div relative定位定高定宽，内部放个个浮动层浮动在右下角，内容为覆盖最后的文字</div>
加支付宝好友偷能量挖...
原创文章，转载请注明出处：多行文本显示实现text-overflow ellipsis省略号