雨夜带刀

经常会在项目中碰到文字溢出的情况，解决起来也比较麻烦，而最大的麻烦还是在浏览器的兼容问题上。至少到目前为止，我还没找到用CSS就能完美解决文字溢出的办法。前几天就再次碰到这个问题，之后一查，发现和迅雷的一个页面重构的面试题惊奇的相似，仔细一想，也没啥巧合不巧合的，只能说这种情况太常见了。

要求是这样的：一个新闻列表，新闻标题后紧跟着日期，新闻标题的宽度超过一定的宽度就要自动截断，但是日期必须显示完整。

花了点时间研究了下，最终的效果对于浏览器的兼容不是很理想，但我觉得也是很不错了。

<p>
前不久给同志们介绍了压缩JavaScirpt和CSS文件的<a href="https://blog.yiguochen.com/minify.html" title="压缩JS/CSS的利器–minify">minify</a>，这个是用PHP5开发的基于服务端的压缩，并且需要Apache+PHP环境的支持。虽然压缩效果还是比较理想，但是有环境限制，今天我再给同志们介绍一款可以在本机压缩JavaScirpt和CSS文件的程序：YUI Compressor。</p>
<p>YUI Compressor是Yahoo!开发的一个专门用于压缩JavaScript和CSS文件的小工具，操作系统中需要jdk环境的支持。所有要使用这个小工具，得先安装jdk，然后配置JAVA_HOME的环境变量。</p>
<p>jdk的下载地址：<a href="http://www.oracle.com/technetwork/java/javase/downloads/jdk6-jsp-136632.html" title="jdk的下载地址" target="_blank">http://www.oracle.com/technetwork/java/javase/downloads/jdk6-jsp-136632.html</a></p>

<p>这是一个基于jQuery的效果，当鼠标在小图片上悬停时，会弹出一个大图，该大图会跟随鼠标的移动而移动。这个效果最初源于小敏同志的一个想法，刚开始做的时候只能实现弹出的图片是固定的，不能随鼠标移动，最后加以改善，终于实现了比较理想的效果。今天就把制作该效果的经验与大家一同分享。先看看最终效果演示：</p>
<div class="art_inner_img"><img src="https://blog.yiguochen.com/wp-content/uploads/2010/09/jquery-image-hover-zoom-demo.jpg" alt="基于jQuery的鼠标悬停时放大图片的效果演示" /></div>