注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

成长...

坚持,一定要坚持!

 
 
 

日志

 
 

处理文本/标题过长的方法  

2008-01-14 11:35:09|  分类: 未分类 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

很多情况下我们都是自己写个函数截取一定长度来显示,还要考虑英文字符和中文字符。麻烦

今天看到网易博客上是用css控制的,真是巧妙

看看效果:

选一下文字看看:

 

处理办法:

 <style>
.autoTrim{width:300px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
</style>

<span class="autoTrim">

过长的标题过长的标题过长的标题过长的标题过长的标题过长的标题过长的标题

</span> 

 

解释:

主要是 text-overflow:ellipsis; 在起作用,一个神奇的css属性

语法:text-overflow : clip | ellipsis

          clip : 不显示省略标记(...),而是简单的裁切 不常用
          ellipsis: 显示省略标记(...)  常用

作用:设置或检索是否使用一个省略标记(...)标示对象内文本的溢出。

它已经被定义在 CSS 3 规范中,但目前为止,还只有 IE6+ 提供了对其的支持(据说 Safari 1.3+ 已经支持)。
幸好,Opera 和 Firefox 都有相应的hack方法。

 

注意:

1. text-overflow属性仅是注解当文本溢出时是否显示省略号标记。但是它并不具备其它的样式属性定义。
我们想要实现溢出时产生省略号的效果。还必须定义:
强制文本在一行内显示(white-space:nowrap)以及 溢出内容为隐藏(overflow:hidden)。
只有这样才能实现溢出文本显示省略号的效果。

2. 支持测试
        a. IE6+下使用当然是没问题的
        b. Opera用 -o-text-overflow:ellipsis 来模拟CSS3中的 text-overflow:ellipsis
        c. Firfox 下没有效果
           网上有人用一个Firefox独有的XBL技术实现 -- Simulating text-overflow on Firefox with unobtrusive Javascript。作者劝大家不要再花精力去寻找其他针对Firefox的解决办法了,因为他已经花费了大量的时间都无法找到一个满意的方案。从demo 源码中可以看到如下的CSS属性定义

text-overflow:ellipsis;
-moz-binding:url("moz-text-overflow.xml#XBLDocument");
从代码中看出,还需要一个 xml 格式的XBL组件定义文件以及配套的一个 js 文件

 

总结:

一个兼容主浏览器的 text-overflow 定义如下:

.txtAutoTrim{
    white-space:nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    -moz-binding: url("moz-text-overflow.xml#XBLDocument");/*配套对应的xml和js文件*/
}


 

  评论这张
 
阅读(856)| 评论(1)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017