适用于只有一行文字的情况.
.ellipsis{
text-overflow:ellipsis; /*当对象内文本溢出时显示省略标记(...)*/
width:200px; height:50px;
overflow:hidden;
white-space:nowrap;
}
text-overflow是CSS3的属性，IE6以上版本、Safari、chrome 支持。它可以带2个参数：
clip [不显示省略标记（...），而是简单的裁切];
ellipsis[当对象内文本溢出时显示省略标记（...）];
Firefox3出来了，仍然不支持text-overflow:ellipsis;
解决方法可以通过Firefox强大的XUL绑定实现如下：
-moz-binding: url('ellipsis.xml#ellipsis');
绑定的XML内容如下：
<?xml version="1.0" encoding="utf-8" ?>
<bindings xmlns="http://www.mozilla.org/xbl" xmlns:xbl="http://www.mozilla.org/xbl" xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<binding id="ellipsis">
<content>
<xul:description crop="end" xbl:inherits="value=xbl:text">
<children/>
</xul:description>
</content>
</binding>
</bindings>
xul:description的crop原来是那样强。。除了可以点点点掉后面的。。还可以点点点前面或者中间部分的。。这个功能可是非常实用哦，不知道W3C虾米时候也给这样的CSS属性让我们简单搞定一大堆问题呢。
然后还不小心发现。hedger悄悄的也实现一样的功能Hacking text-overflow for Firefox，不过还是感觉用XBL简洁方便。。
在很久很久以前，我也在研究，能不能调用firefox处理title的点点点的东东来完成效果，不过一直没实现。之前提出的-moz-text-overflow: ellipsis;via这种不靠谱的说法也不行，看来人家是铁了心。
IE的问题：
一.双边距问题
浮动元素的外边距会加倍，但与第一个浮动元素相邻的其他浮动元素外边距不会加倍。
解决方法：在此浮动元素增加样式 display:inline;
二.图片产生的间隙
父元素直接包含<img>，这个图片下方会和父元素边缘产生间隙。
解绝方法：1.在源代码中让</div>和<img>在� ......
