CSS3中Text Effects属性一共有三个；text-shadow;text-overflow;word-wrap。其中text-shadow是CSS3中一个常用的属性，在《CSS3 text-show》中专门介绍了关于text-shadow的特性和使用方法。今天主要跟大家一起来学习CSS3中有关文本效果的另一个属性：text-overflow的使用。

大家在平时的网页制作中一定碰到过内容溢出的问题，比如说文章列表很长，而其宽度又受到限制，此时超出宽度的内容就会以（...）显示。以前实现这样的效果都是由后台程序截取一定的字符数在前台输出，另外一种方法就是使用js截取一定的字符数来实现。可是这两种方法都有其不足之处，比如说中文 和英文的计算字符宽度的问题，这个值不好计算，所以造成截取字符数不好控制，从而其通用性也差。那么今天我们来尝试一下CSS3中的text-overflow这个属性，看他如何实现这样的效果。

语法：

  text-overflow ： clip | ellipsis

取值说明：

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

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

兼容的浏览器

1、text-overflow: clip

2、text-overflow:ellipsis

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

下面我们先来看text-overflow中的clip的使用，别的先不说，大家一起来看下面的一段代码：

Html Code

   <div class="demo text-overflow-clip">
      test overflow clip effect test overflow clip effect text overflow clip effect
   </div>

CSS Code:

  .demo {
    width: 100px;
    padding: 10px;
    border: 1px solid #ccc;
  }
  .text-overflow-clip {
    text-overflow: clip;
  }

效果：

从上面的效果图中我们可以明显看出text-overflow:clip；没有起到任何作用。文字没有任何截切，此时的div自动撑高以适应内容的高度。那么你可以在本地把text-overflow:clip删除在看看效果。你会发现有没有text-overflow:clip都是一样的，那需要怎么做呢？前面说过需要在一定的高度范围内配合overflow:hidden才能有效果。那么现在给这个div加上50px的高度和overflow:hidden属性：

 .text-overflow-clip {
   text-overflow: clip;
   overflow: hidden;
   height: 50px;
 }

效果：

到这里我提议大家来个大胆的尝试，我们把上面代码中的text-overflow:clip注掉去

  .text-overflow-clip {
    /*text-overflow: clip;*/
    overflow: hidden;
    height: 50px;
  }

效果：

此时把两个效果图对比一下，看看有什么区别没有？不用我说，大家都知道，他们两是一模一样的效果，那么我在这里需要说明的一点是：text-overflow:clip这个属性在我们实际应用中根本是没有任何意义的，因为他离开了height和overflow无任何效果，当他有这两个属性配合时，达到的效果跟我们设置overflow:hidden效果一样，无任何区别，因此我们在实际应用中完全可以使用overflow:hidden来实现这样的效果。换句简单的话说：单独的text-overflow:clip起不到任何截切效果。

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

Html Code:

   <div class="demo text-overflow-ellipsis">用我来测试text-overflow:ellipsis的性能和使用方法。</div>

CSS Code:

  .text-overflow {
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;		  
  }

效果：