CSS实现文字超出长度隐藏,显示省略号

CSS是一门学问，它变幻莫测，看似简单，但是真正想学好CSS又不是那么简单。下面我来给大家说说CSS当中一个很小的细节--CSS实现文字超出长度显示省略号。

做网页开始我认为其实这个功能没有什么必要，直接用程序把文字切断显示省略号，这个虽然很好的解决了这个问题，但是你有没有想过会有什么其它问题？自从我学了一点SEO的知识我就知道了会有什么问题了。

对于用户来说两种方法没有什么不一样。看起来效果是一样的。但是对于搜索引擎来说就会打不一样。用程序切断的搜索引擎看起来就是一段切断的字符串。但是用css实现对于搜索引擎来说还是一段完整的字符串。这样对搜索引擎会更友好。

既然有这样的好处，这种方法是怎么实现的呢。下面通过一个例子告诉大家实现的方法。

CSS样式表：

<style type="text/css">
        ul { width: 50px; margin: 50px auto; }
        li { width: 50px; line-height: 25px;  }
        a { color: #03c;  display: block; float: left;overflow: hidden; 
           padding-left: 20px; text-align: left; text-overflow: ellipsis; 
white-space: nowrap; width: 80%; }
        a:hover { color: #000; }
    </style>

HTML代码：

 <ul>
        <li><a href="http://www.csshello.com" title="css模板">css模板</a></li>
        <li><a href="http://www.csshello.com">免费网站模板下载网站:hello素材网</a></li>
        <li><a href="http://www.csshello.com">css模板|js特效代素材网</a></li>
        <li><a href="http://www.csshello.com">css模板|js特效代码hello素材网</a></li>
        <li><a href="http://www.csshello.com">-免费网站模板下载网站:hello素材网</a></li>
        <li><a href="http://www.csshello.com">免费网站模板下载网站:hello素材网 </a></li>
    </ul>

通过这种方法就可以很好的解决问题，并且各个浏览器都会兼容