一、碎碎念的前言
http://www.cnblogs.com/atree/archive/2011/08/09/tag-kaixin-Interactive.html
如果短评文字个数超过一定的长度，后面一些文字会被省略，以三角形式呈现。鼠标经过，则显示完整的文字内容，三角消失，如下截图：
我这人很懒的，最怕麻烦，最怕折腾了，加上小三角又是使用背景图片实现的，这有悖页面重构之无图片准则，显然，如此残害时间与脑细胞的实现方法打死我也是接受不了的。于是身体力行，整出了个相对不错的方法，通过纯CSS实现类似效果与交互的方法。于是在这里分享下，这也就是本文的内容了。
二、demo与效果
效果抢鲜，您可以狠狠地点击这里：纯CSS下短评式交互demo
效果截图如下：
哇哈哈，从效果上来讲，基本上OK的啦，普通字符文字自然安分守已，有小三角文字hover上去，会显示完整文字内容。没有什么移位啊，身体不适之类的。没有任何的JS做推手，全部CSS挑大梁实现的，而且一直让人蛋疼的IE6浏览器下效果也是很OK的！
那么实现上呢？是否简单，是否易懂，是否易操作呢？
<a href="javascript:" class="impress impress_c1">
<span class="impress_in">暴力女，虐男癖</span>暴力女，虐 <span class="impress_triangle">◆</span>
</a>
从HTML中内容估计可以略知原理一二了。
<a href="javascript:" class="impress impress_c2">成熟大气</a>
如果宽度超出限制，为了显示的需要，我们需要两段文字内容，一段是阉割版的，用做默认的显示；另外一段就是完整的文字内容，用做鼠标经过的显示。文字的截取由后台控制与输出，这很容易实现的，我们前台不予以担心与考虑。
在
<span class="impress_in">暴力女，虐男癖</span>暴力女，虐 <span class="impress_triangle">◆</span>
这行HTML中：
这部分<span class="impress_in">暴力女，虐男癖</span>表示的就是完整文字段；暴力女，虐就是阉割文字段； 空格作用是为了撑开点距离（为了让代码看上去更直观，上面那行代码直接打空格了）；<span class="impress_triangle">◆</span>则是使用字符技术生成的三角。
impress_c1, impress_c2
至于CSS代码中具体样式的含义和作用您就不必关心了，估计也没人去关心，直接用就可以了，不过可以提下，hover上去显示完整文字借助的absolute绝对定位实现的。
http://www.zhangxinxu.com/wordpress/?p=1679
