使用兼容ie6 ie7 ie8 FF的text-overflow:ellipsis超出文本显示省略号来代替截取函数更有利于seo，如果使用截取函数，源代码中的标题是显示不完整的，即便是在title属性中使用了显示完整标题，也不如完整的标题文字连接。这个方法使得两者兼得，既能显示完整标题又对搜索引擎友好。

如果不想显示省略号，那么把text-overflow属性值改成 clip 就行了，显示的还是完整的标题文字连接。

下面是html文件完整代码，已经测试过了，大家复制使用即可。

效果预览：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>seo2012新浪博客</title>
<meta name="keywords" content="">
<meta name="description" content="">
<style type="text/css">
 
 ul{border:1px solid #ccc;width:200px;}
 ul li{display:block;}
 ul li a{display:block;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
</style>
</head>
<body>
 <ul class="">
  <li><a href="http://blog.sina.com.cn/u/2270076000" title="seo2012超出文本显示省略号更有利于seo">seo2012超出文本显示省略号更有利于seo</a></li>
  <li><a href="http://blog.sina.com.cn/u/2270076000" title="seo2012超出文本显示省略号更有利于seo">seo2012超出文本显示省略号更有利于seo</a></li>
  <li><a href="http://blog.sina.com.cn/u/2270076000" title="seo2012超出文本显示省略号更有利于seo">seo2012超出文本显示省略号更有利于seo</a></li>
  <li><a href="http://blog.sina.com.cn/u/2270076000" title="seo2012超出文本显示省略号更有利于seo">seo2012超出文本显示省略号更有利于seo</a></li>
  <li><a href="http://blog.sina.com.cn/u/2270076000" title="seo2012超出文本显示省略号更有利于seo">seo2012超出文本显示省略号更有利于seo</a></li>
  <li><a href="http://blog.sina.com.cn/u/2270076000" title="seo2012超出文本显示省略号更有利于seo">seo2012超出文本显示省略号更有利于seo</a></li>
  <li><a href="http://blog.sina.com.cn/u/2270076000" title="seo2012超出文本显示省略号更有利于seo">seo2012超出文本显示省略号更有利于seo</a></li>
  <li><a href="http://blog.sina.com.cn/u/2270076000" title="seo2012超出文本显示省略号更有利于seo">seo2012超出文本显示省略号更有利于seo</a></li>
  <li><a href="http://blog.sina.com.cn/u/2270076000" title="seo2012超出文本显示省略号更有利于seo">seo2012超出文本显示省略号更有利于seo</a></li>
 </ul>

</body>
</html>

[转载]使用兼容ie6 ie7 ie8 FF的text-overflow:ellips的更多相关文章

  1. IE6 IE7 IE8 FF兼容符号

    2.区别IE8.IE9 一般来说,我们写的结构比较好的时候,IE8/9下是没区别的.所以可能很少人关注只有IE8或只有IE9才识别的css hack. 因为IE8及以下版本是不支持CSS3的,但是我们 ...

  2. 兼容IE6/IE7/IE8/FireFox的css hack

    兼容IE6/IE7/IE8/FireFox的css hack .color{ background-color: #CC00FF; background-color: #FF00009; *backg ...

  3. 给Select赋值 innerHTML 不兼容IE6\IE7\IE8\IE9

    <select class="b-select" id="location-province" name="Province" def ...

  4. 下拉菜单select高度（兼容IE6/IE7/IE8/火狐等主流浏览器）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. CSS兼容IE6 IE7 IE8 IE9 Firefox的总结

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. DIV+CSS IE6/IE7/IE8/FF兼容问题汇总

    1.IE8下兼容问题,这个最好处理,转化成ie7兼容就可以.在头部加如下一段代码,然后只要在IE7下兼容了,IE8下面也就兼容了 <meta http-equiv="x-ua-comp ...

  7. 最新区分兼容IE6/IE7/IE8/IE9/FF的CSS HACK写法和Css if hack条件语法操作说明

    自从安装了IE8.0正式版本!木头 就对基本的几个 CSS HACK的做一下归纳!希望对网页前端布局DIV+CSS的实施者有所帮助! 本文就主要以:IE6+IE7+IE8+IE9+FF为主要研究对象 ...

  8. 区分兼容IE6/IE7/IE8/IE9/FF的CSS HACK写法

    HACK原理:不同浏览器对各中字符的识别不同 在 CSS中常用特殊字符识别表: (1)*:  IE6+IE7都能识别*,而标准浏览器FF+IE8是不能识别*的; (2)!important: 除IE6 ...

  9. DIV+CSS IE6/IE7/IE8/FF兼容问题大全

    1. [代码][CSS]代码 1, FF下给 div 设置 padding 后会导致 width 和 height 增加, 但IE不会.(可用!important解决) 2, 居中问题. 1).垂直居 ...

随机推荐

  1. hdu 5147 Sequence II

    http://acm.hdu.edu.cn/showproblem.php?pid=5147 题意:问有多少个这样的四元组(a,b,c,d),满足条件是 1<=a<b<c<d; ...

  2. MFC任务管理器task manager----进程的挂起与恢复--NtSuspendProcess&&NtResumeProcess

    http://hi.baidu.com/xbbsh/blog/item/b73d3125462201084c088db1.html ---------------------------------- ...

  3. oracle中的exists 和not exists 用法详解(转)

    有两个简单例子,以说明 “exists”和“in”的效率问题 1) select * from T1 where exists(select 1 from T2 where T1.a=T2.a) ; ...

  4. SVN:分支合并到主干

    合并日志: --- Merging r173674 through r175986 into '.': C src/test/java/com/test/rigel/sandbox/organizat ...

  5. Unity 地形

    创建一个地形: GameObject —> Create Other —> Terrain; 地形的属性设置:(部分属性后面有另说,表示其他作者有说明过的内容) Base Terrain( ...

  6. nginx第三方模块---nginx-sticky-module的使用（基于cookie的会话保持）

    目前的项目网站架构中使用了F5和nginx,F5用来做负载均衡,nginx只用作反向代理服务器.最近应客户的要求准备去掉F5,使用软负载.大家都知道nginx抗并发能力强,又可以做负载均衡,而且使用n ...

  7. 【模拟】Codeforces 710B Optimal Point on a Line

    题目链接: http://codeforces.com/problemset/problem/710/B 题目大意: 给N个点的坐标,在X轴上找到最靠左的点使得这个点到N个点距离之和最小. 题目思路: ...

  8. HDOJ(HDU) 2192 MagicBuilding(用Java的Map做了下)

    Problem Description As the increase of population, the living space for people is becoming smaller a ...

  9. Java---字节输入，文件操作，病毒制造，请谨慎运行！

    今天刚刚学了Java文件操作,跟着老师的思路,迫不及待的制造了这个小病毒. 用到的是一些小知识,很简单. 创建文件和文件夹,向文件中写入字节. 我已渐渐的爱上了编程!!! 下面附上完整代码: impo ...

  10. SQL 第二章 作业

    /*第二章 作业*/ create table S ( sno char(2) NOT NULL UNIQUE, sname char(3), city char(2) ); alter table ...