如何通过CSS样式来进行字段截取

我们知道,在网页中,尤其是前台,页面中每一个板块的宽度都是相对固定的,当文章的列表标题过长的时候,为了避免换行造成的不规整现象,通过会用对标题字段进行截取来维持一致性。通常采用的方法是通过js脚本,不过其实强大的CSS的text-overflow:ellipsis属性也可以帮我们实现这个功能。

使用text-overflow:ellipsis对溢出文本显示省略号有两个好处,一是不用通过程序限定字数;二是有利于SEO。需要使用对对溢出文本显示省略号的通常是文章标题列表,这样处理对搜索引擎更友好,因为标题实际上并未被截字,而是局限于宽度而未被显示而已。

通常的做法是这样的:
1.overflow:hidden;
2.text-overflow:ellipsis;
3.-o-text-overflow:ellipsis;
4.white-space:nowrap;
5.width:100%;
其中,overflow: hidden和white-space: nowrap都是必须的否则不会显示省略号;-o-text-overflow: ellipsis针对Opera;而宽度的设定主要是针对IE6;
样例:
.d{
display:block;
height:25px;
width:100px;
white-space:nowrap;
text-overflow:ellipsis;
-o-text-overflow:ellipsis;overflow: hidden;
}
呵呵,很有用,你也试试吧!


本文固定链接: http://20tc.com/css-substring.html | TC的博客

该日志由 ckily 于2012年03月07日发表在 CSS, 网站建设 分类下, 你可以发表评论,并在保留原文地址及作者的情况下引用到你的网站或博客。
原创文章转载请注明: 如何通过CSS样式来进行字段截取 | TC的博客
关键字: ,

如何通过CSS样式来进行字段截取:目前有2 条留言

  1. 过来学习一下来了啊

    2012-03-08 上午 10:02 [回复]
  2. 沙发
    ckily China Google Chrome Windows :

    🙁 俺发文比较慢,天天被TC大大催死了,

    2012-03-07 下午 5:14 [回复]

发表评论


*

快捷键:Ctrl+Enter

无觅相关文章插件,快速提升流量