html text-overflow:ellipsis,CSS3 Text-overflow

CSS3中Text Effects属性一共有三个；text-overflow;CSS3中一个常用的属性，在《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

test overflow clip effect test overflow clip effect text overflow clip effect

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注掉去