css限制字数

解决内容溢出问题（比如说文章列表很长，而其宽度又受到限制，此时超出宽度的内容就会以（...）显示）：text-overflow

1、clip:表示不显示省略标记(...)，而只是简单的裁切，需要在一定的高度范围内配合overflow:hidden属性使用，如果不配合的话将无任何效果；

2、ellipsis：对象文本溢出时将显示省略标记(...)，需要配合overflow:hidden；white-space:nowrap一起使用才会有效果。

text-overflow:clip所有浏览器都支持，但是text-overflow:ellipsis只有Firefox不支持，但有一些方法可以 兼容解决这个问题，这个问题后面在来一起讨论，我们先从简单的开始。text-overflow:ellipsis应用在Opera浏览器下时，需要加上 其前缀“-o-”。

 

.text-overflow-clip {
   text-overflow: clip;
   overflow: hidden;
   height: 50px;
 }
text-overflow:clip这个属性在我们实际应用中根本是没有任何意义的，因为他离开了height和overflow无任何效果，当他有这 两个属性配合时，达到的效果跟我们设置overflow:hidden效果一样，无任何区别，因此我们在实际应用中完全可以使用 overflow:hidden来实现这样的效果。换句简单的话说：单独的text-overflow:clip起不到任何截切效果。

text-overflow:clip这个属性在我们实际应用中根本是没有任何意义的，因为他离开了height和overflow无任何效果，当他有这 两个属性配合时，达到的效果跟我们设置overflow:hidden效果一样，无任何区别，因此我们在实际应用中完全可以使用 overflow:hidden来实现这样的效果。换句简单的话说：单独的text-overflow:clip起不到任何截切效果。

 

text-overflow:ellipsis在配合overflow:hidden；white-space:nowrap属性可以用来代替标题截取函 数，这样一来有助于搜索引擎，打个比方说，我们标题有20个字符，而其宽度只能设置100px，如果采用标题的截取函数，那么这个标题就显示不够完整，要 是我们使用text-overflow:ellipsis，标题输出是完整的，只不过是受到了其元素容器大小限制无法全部显示出来，此时就用(...)代 替了被隐藏的部分。换句说，text-overflow:ellipsis属性只起到一个注解作用；

 

.text-overflow-ellipsis {
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    height: 30px;		  
    overflow: hidden;
    white-space: nowrap;   //让文本不换行，让文本内容强制性在同一行
  }