使用兼容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. sql 使用 FOR XML PATH实现字符串拼接

    sql中经常需要把多个行数据合成一行下面是利用 FOR XML PATH来实现的简单介绍. 1,把图一的转换为图二: SELECT articleID, (),tagID)+',' FROM arti ...

  2. 使用c语言编写cgi程序

    http://blog.chinaunix.net/uid-22566367-id-3109877.html 简单的说,cgi是沟通HTML表单和服务器端程序的接口,是可以被其他语言所应用的一个规范集 ...

  3. Oracle 精简绿色版客户端的配置

    在项目开发中常常用到Oracle.但Oracle 客户端体积很大.安装后,主要用的就1个功能:TNS配置服务名,偶尔用到SqlPlus.在开发过程中,大量使用Navicate和PL/SQL Devel ...

  4. 常见的三种Web服务架构

    常见的三种Web服务架构 转自http://www.cnblogs.com/bvbook/archive/2008/12/24/1360942.html 相互竞争的服务架构 The Competing ...

  5. 【Java】Servlet 工作原理解析

    Web 技术成为当今主流的互联网 Web 应用技术之一,而 Servlet 是 Java Web 技术的核心基础.因而掌握 Servlet 的工作原理是成为一名合格的 Java Web 技术开发人员的 ...

  6. 关于javascript

    Client-Language-----------------------JavaScript/Object-C/Java/C# HTML5 DOM/Template/Data/Ajax/Regul ...

  7. Solr4.6从数据库导数据的步骤

    http://blog.csdn.net/bruce128/article/details/17796705 Solr4.6有从数据库导数据的功能.导入步骤如下: 1.将下载下来的solr4.6的di ...

  8. POJ 2594 Treasure Exploration(带交叉路的最小路径覆盖)

    题意:  派机器人去火星寻宝,给出一个无环的有向图,机器人可以降落在任何一个点上,再沿着路去其他点探索,我们的任务是计算至少派多少机器人就可以访问到所有的点.有的点可以重复去. 输入数据: 首先是n和 ...

  9. 【转】中兴G718C卡刷刷机教程(青漾2 4G)--不错

    原文网址:http://www.zterom.com/guide/2278.html 刷机包 B11纯净版 适合长久使用_B11_lite_0130.zip 刷机用了20多分钟. 在和大家分享过中兴G ...

  10. ISAP 模板

    #include <iostream> #include <cstring> #include <cstdio> #include <queue> us ...