关键字: 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,当文字内容过多时,不换行,而是出现...
这样写:例如
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"> - table{table-layout:fixed;width:106px;}
- td{padding:2px
3px;border:1px solid #000;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} - </style>
- </head>
- <body>
- <table
cellspacing="0" cellpadding="0"><tr><td>锦江之星旅馆有限公司系亚洲规模最大的综合性旅游企业集团</td></tr></table></body> - </html>
<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<styletype="text/css">table{table-layout:fixed;width:106px;}td{padding:2px3px;border:1px solid#000;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}</style></head><body><tablecellspacing="0"cellpadding="0"><tr><td>锦江之星旅馆有限公司系亚洲规模最大的综合性旅游企业集团</td></tr></table>
</body></html>
1.一定要给table定义table-layout:fixed;只有定义了表格的布局算法为fixed,下面td的定义才能起作用。
其它的要点和上面一样
text-overflow 的兼容性:
测过ie6,ie7,ff3,safari,opera,chorme,只有ff3和opera不兼容
多行省略
去掉whiteSpace
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;