&nbs p;
@H_ 126 _2@
一、碎碎念的前言
最近花功夫追一女孩子，疏忽了博客酱，ごめんね【音：go men nei】。想以前一个人的时候，有的就是时间和钱；现在有了姑娘，时间大把耗掉，银子大把花掉。果然鱼和熊掌不可兼得哈。今天天阴雨湿，又逢周末，甚有闲情，于是抽点时间，亡羊补牢，补上一篇小博，不是什么惊天地泣鬼神的内容，小小tip，可能会让大家见笑，纯粹小小卖弄，颇有滥竽充数之嫌，
。
开心网转帖后面有一个标签式的短评观点交互效果，这种效果的精髓与QQ好友印象是很接近的。如下图：
如果短评文字个数超过一定的长度，后面一些文字会被省略，以三角形式呈现。鼠标经过，则显示完整的文字内容，三角消失，如下截图：
我们小心翼翼地打开小bug一看其 HTML 的庐山真面目，结果发现标签N多，层级也N复杂，且交互效果貌似是JS这个幕后黑手（非借助 CSS ），而且考虑到开心网的这个效果文字经常会出现一 半 被截断不可见的情况：
我这人很懒的，最怕麻烦，最怕折腾了，加上小三角又是使用背景图片实现的，这有悖自己的页面重构之无图片准则，显然，如此残害时间与脑细胞的实现方法打死我也是接受不了的。于是身体力行，整出了个相对不错的方法，通过纯CSS实现类似效果与交互的方法。于是在这里分享下，这也就是本文的内容了。
二、demo与效果
效果抢鲜，您可以狠狠地点击这里：纯CSS下短评式交互demo
效果截图如下：
鼠标移到第一个有三角模样标签上效果如下：
哇哈哈，从效果上来讲，基本上OK的啦，普通字符文字自然安分守已，有小三角文字hover上去，会显示完整文字内容。没有什么移位啊，身体不适之类的。没有任何的JS做推手，全部CSS挑大梁实现的，而且一直让人蛋疼的IE6浏览器下效果也是很OK的！
那么实现上呢？ 是否 简单 ，是否易懂，是否易操作呢？
三、纯CSS 下标 签词交互的实现
我们拿demo页中的第一个标签词举例吧，其完整HT ML 如下：
<a hr ef="javascript:" class="im Press im PR ess_c1"> <span class="impress_in">暴力女，虐男癖</span>暴力女，虐& am p;nbsp;<span class="impress_triangle">◆</span> </a>
从HTML中内容估计可以略知原理一二了。
如果我们是长度没有超过限制的标签词，例如demo页中的第二个标签词“成熟大气”，则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> 则是使用字符技 术 生成的三角。
这就是CSS实现标签词交互的HTML内容结构，我想，这要比开心的做法要浅显易懂的多吧。
无论是文字安分还是文字溢出，外部标签的类名的 impress_c1, impress_c2 等都是用来控制显示的 背景颜色 的，一般居前的标签词比重大，颜色深。
为了兼顾IE6下的hover效果，最外层标签需要是a标签。本方法三角字符产生，直接可以使用css的color属性控制颜色，所以，您要是想应用此实现方法的话，替换风格什么的都是非常简单的，改改背景色，颜色就可以了，很轻松很惬意的。
至于CSS代码中具体样式的含义和作用您就不必关心了，估计也没人去关心，直接用就可以了， 不过 可以提下，hover上去显示完整文字借助的absolute绝对定位实现的。
四、很快嘛，结语了
昨晚打球了，虽然昨晚也下雨了。 明天 去钓鱼，虽然明天会下雨。后天去拜访 大学 同学 ，虽然后天也可能下雨。
废话就不多说了，本文所介绍的不一定是最好的方法，欢迎提出更好的解决 方案 。感谢阅读。
（本篇完）
觉得 可用，就经常来吧！ 欢迎评论哦！ html5教程 ，巧夺天工，精雕玉琢。小宝典献丑了！
总结
以上是 为你收集整理的 html5教程-小卖弄：开心网标签词观点交互的CSS实现 全部内容，希望文章能够帮你解决 html5教程-小卖弄：开心网标签词观点交互的CSS实现 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于html5教程-小卖弄：开心网标签词观点交互的CSS实现的详细内容...