CSS3.0(0):text-overflow使用文字超多div的宽度或超过在table中<td>

关键字:text-overflow:ellipsis

语法:text-overflow:clip | ellipsis

取值

clip:默认值.不显示省略标记(...),而是简单的裁切.

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

可惜text-overflow 还只是ie的私有属性而已,也没被收录到w3c标准里.

如果想让某个容器(div或者li或者...块级元素)显示一行文字,当文字内容过多时,不换行,而是出现...

这样写:例如

 1     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
 2     <html xmlns="http://www.w3.org/1999/xhtml">  
 3     <head>  
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
 5     <title></title>  
 6     <style type="text/css">  
 7     #box{width:100px;background-color:#87CEEB;padding:2px 3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}   
 8     </style>  
 9     </head>  
10     <body>  
11     <div id="box">我是小灰灰.我是小灰灰.我是小灰灰.我是小灰灰.我是小灰灰.</div>  
12     </body>  
13     </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,当文字内容过多时,不换行,而是出现...

这样写:例如:

 1     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
 2     <html xmlns="http://www.w3.org/1999/xhtml">  
 3     <head>  
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
 5     <title></title>  
 6     <style type="text/css">  
 7     table{table-layout:fixed;width:106px;}   
 8     td{padding:2px 3px;border:1px solid #000;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}   
 9     </style>  
10     </head>  
11     <body>  
12     <table cellspacing="0" cellpadding="0"><tr><td>我是小灰灰.我是小灰灰.我是小灰灰.我是小灰灰.我是小灰灰.</td></tr></table></body>  
13     </html>  

注意:

1.一定要给table定义table-layout:fixed;只有定义了表格的布局算法为fixed,下面td的定义才能起作用。

CSS3.0(0):text-overflow使用文字超多div的宽度或超过在table中<td>,古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。