一种完美的文字溢出省略号解决方案
solar @ 2009年08月08日 - 舒服，沙发还在 » - 520 Views
我们都知道 CSS 里有个 text-overflow: ellipsis 这个的作用是当你定义了元素的宽度时，如果元素里的文字内容超出定义的宽度，则会在文字末尾显示"…"，这样文字（链接）列表会看起来整齐美观，可惜的是目前只有 IE 完美支持这个属性，其它浏览器均不支持。
为解决这个问题，Google 了半天都不能令我满意，基本都是说的纯CSS方法，经测试这种方法并不完美，后来终于找到了，基于 jQuery 插件的解决方法，经测试该方法在各主流浏览器里均表现完美。
如何使用：
首先你需要定义一段CSS，类似下面这样
- .overflow {
- text-overflow: ellipsis;
- -o-text-overflow: ellipsis;/* for opera*/
- width: 200px;
- white-space: nowrap;
- border-bottom: 1px solid black;
- overflow: hidden;
- margin-bottom: 15px;
- }
然后 jQuery 调用这个 ellipsis() 函数即可。
- $(".overflow").ellipsis();
当然这样做之前你需要 jQuery 和 这个插件。更具体的介绍和使用方法请 参考这里，这里是一个 演示，具体效果你还可以参看这篇文章下面的“相关文章”和“随机文章”。