text-overflow的使用
省略标记在页面中经常都会看到，从前，我们都是通过服务器端的程序来创建省略标记，现在好了，有了text-overflow属性，我们可以很简单的实现这个功能。
一个示例代码如下：
<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<body>
<style tyep="text/css">
div {margin:5px 0;overflow:hidden;width:200px;}
div.a {border:1px solid red; text-overflow:ellipsis;white-space:nowrap;}
div.b {border:1px solid green; text-overflow:ellipsis;-o-text-overflow:ellipsis;white-space:nowrap;}
div.c {border:1px solid blue; text-overflow:ellipsis;-o-text-overflow:ellipsis;}
</style>
<div class="a">
test somthing here.test somthing here.test somthing here.test somthing here.test somthing here.
</div>
<div class="b">
毒其1发缩短发送毒发缩短发撒阿瑟发送发送发缩短发送毒发斯多夫阿瑟毒发撒test111 1111111111111112133435te st1111111111111111112133435 test111111 111 111111 11121 334353 5345345
</div>
<div class="c">
test1111111111111111112133435test1111111111111111112133435test111111111111111111213343535345345 </div>
<div class="c">
test 11111 1111111 1111112133 435te t111 111111 1111111112133435 test1111111111 111111112 13343 53 5345345
</div>
</body>
</html>
<html>
<body>
<style tyep="text/css">
div {margin:5px 0;overflow:hidden;width:200px;}
div.a {border:1px solid red; text-overflow:ellipsis;white-space:nowrap;}
div.b {border:1px solid green; text-overflow:ellipsis;-o-text-overflow:ellipsis;white-space:nowrap;}
div.c {border:1px solid blue; text-overflow:ellipsis;-o-text-overflow:ellipsis;}
</style>
<div class="a">
test somthing here.test somthing here.test somthing here.test somthing here.test somthing here.
</div>
<div class="b">
毒其1发缩短发送毒发缩短发撒阿瑟发送发送发缩短发送毒发斯多夫阿瑟毒发撒test111 1111111111111112133435te st1111111111111111112133435 test111111 111 111111 11121 334353 5345345
</div>
<div class="c">
test1111111111111111112133435test1111111111111111112133435test111111111111111111213343535345345 </div>
<div class="c">
test 11111 1111111 1111112133 435te t111 111111 1111111112133435 test1111111111 111111112 13343 53 5345345
</div>
</body>
</html>
其效果可自行将代码存为一个html文件后进行查看。
更多的内容见text-overflow 全兼容
