使用兼容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>