使用兼容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. Mvc 页面缓存 OutputCache VaryByCustom

    优化网站,dotNet MVC 可以通过(OutputCache)特性在某些Action上使用缓存,如果我们想要自定义缓存依据可以通过如下方式进行: 第一步, 在 global.asax.cs 文件中 ...

  2. ios的Ping++支付接入步骤-b

    1. Client 发送支付要素给 Server 2. Server 发送支付请求并将返回的支付凭据传给 Client 3. Client 调起支付控件完成支付 4. 渠道同步返回支付结果给 Clie ...

  3. 【转】推荐--《Android深入浅出》----不错

    原文网址:http://www.cnblogs.com/plokmju/p/Android_Book.html 承香墨影   推荐--<Android深入浅出> 基本信息 书名:Andro ...

  4. 【树状数组】CSU 1811 Tree Intersection (2016湖南省第十二届大学生计算机程序设计竞赛)

    题目链接: http://acm.csu.edu.cn/OnlineJudge/problem.php?id=1811 题目大意: 一棵树,N(2<=N<=105)个节点,每个节点有一种颜 ...

  5. 【线段树】HDU 5493 Queue (2015 ACM/ICPC Asia Regional Hefei Online)

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=5493 题目大意: N个人,每个人有一个唯一的高度h,还有一个排名r,表示它前面或后面比它高的人的个数 ...

  6. Subsets II ——LeetCode

    Given a collection of integers that might contain duplicates, nums, return all possible subsets. Not ...

  7. windows下python安装paramiko

    Python中使用SSH需要用到OpenSSH,而OpenSSH依赖于paramiko模块,而paramiko模块又依赖于pycrypto模块,因此要在Python中使用SSH,则需要先安装模块顺序是 ...

  8. Jenkins 九： 小技巧

    1.  问题: jenkins的项目默认存放在 JENKINS_HOME下面的 workspace路径下,导致每次找项目都很不方便. 解决思路:更改jenkins的项目存放地址. 解决方法: 1) 将 ...

  9. 422. Valid Word Square

    似乎可以沿着对角线往右往下检查,也可以正常按题设检查. 我用的后者.. public class Solution { public boolean validWordSquare(List<S ...

  10. Android使用DOM生成和输出XML格式数据

    Android使用DOM生成和输出XML格式数据 本文主要简单解说怎样使用DOM生成和输出XML数据. 1. 生成和输出XML数据 代码及凝视例如以下: try { DocumentBuilderFa ...