CSS截取字符串多余字符并以省略号显示

在制作网站的过程中，列表显示新闻标题或产品标题时会出现字符串过长，导致页面布局错乱。如何解决这个问题呢，当然可以用程序截取多余字符的方法，这里介绍一种用CSS样式来实现的方法，因为这样文字在页面还是实际存在，只是没有显示出来，所以对SEO优化也有好处。

首先要定宽和高，然后使用样式如：

.cuttitle{ display: block; width: 220px; height:24px; overflow:  hidden; white-space: nowrap; -o-text-overflow: ellipsis; text-overflow:  ellipsis; }
 < ul><li  class='cuttitle'>截取多余字符<li></lu> 

 

这样当标题超过长度时就会自动截取。