CSS中的text-overflow:clip|ellipsis的使用

如果想让某个容器（div或者li或者...块级元素）显示一行文字，当文字内容过多时，不换行，而是出现...,可以使用text-overflow:clip|ellipsis

基本语法：text-overflow : clip | ellipsis

若为text-overflow:clip 取默认值，不显示省略标记(...)，而是简单的裁切

若为text-overflow:ellipsis 当对象内文本溢出时显示省略标记(...)

例如：

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <style type="text/css">
	#box{
		100px;
		background-color:#87CEEB;
		overflow:hidden;
		text-overflow:ellipsis;
		white-space:nowrap;
	}   
  </style>
 </head>
 <body>
  <div id="box">helloworldhelloworldhelloworldhelloworldhelloworldhelloworld</div>
 </body>
</html>

注：overflow: hidden; text-overflow:ellipsis;white-space:nowrap;一定要一起用

1.一定要给容器定义宽度.

2.如果少了overflow: hidden;文字会横向撑到容易的外面

3.如果少了white-space:nowrap;文字会把容器的高度往下撑；即使你定义了高度，省略号也不会出现，多余的文字会被裁切掉

4.如果少了text-overflow:ellipsis;多余的文字会被裁切掉，就相当于你这样定义text-overflow:clip.