主要代码如下:
<style>
div{ margin:5px;}
/*利用定位,此方法缺点,省略号永远在末尾*/
.main_a{ position:relative;width:100px; height:auto; line-height:20px; border:#000 1px solid; overflow:hidden;}
.ep_a{ position:absolute; z-index:99; bottom:0px; right:0px; background:#fff; width:20px; height:20px; line-height:20px;}
/*利用内联元素;此方法缺点,当容器固定,字个数超过容器时,省略号被挤出容器*/
.main_b{ width:100px; height:auto; line-height:20px; border:#000 1px solid; overflow:hidden;}
.ep_b{ width:20px; height:20px; line-height:20px;}
</style>
<!--省略号永远在末尾-->
<div class="main_a">
实例实例实例实例实例实例实例实例实例实例实例实例实例实例实例实例实例实例实例实例实例实例实例实例实例实例实例<span class="ep_a">...</span>
</div>
<!--省略号跟随-->
<div class="main_b">
实例实例实例实例实例实例实例实例实例实例实例实例实例实例实例实例实例实例实例实例实例实例实例实例实例实例实例<span class="ep_b">...</span>
</div>
附demo下载:demo