关键字: text-overflow:ellipsis
语法：text-overflow : clip | ellipsis
取值：
clip ：默认值 。不显示省略标记(...)，而是简单的裁切.
ellipsis： 当对象内文本溢出时显示省略标记(...).
可惜text-overflow 还只是ie的私有属性而已，也没被收录到w3c标准里 .
如果想让某个容器（div或者li或者...块级元素）显示一行文字，当文字内容过多时，不换行，而是出现...
这样写：例如
Html代码
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title></title>
- <style type="text/css">
- #box{width:100px;background-color:#87CEEB;padding:2px 3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
- </style>
- </head>
- <body>
- <div id="box">锦江之星旅馆有限公司系亚洲规模最大的综合性旅游企业集团</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.
如果容器是table，当文字内容过多时，不换行，而是出现...