首页 > 代码库 > CSS3.0(0):text-overflow使用文字超多div的宽度或超过在table中<td>
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的定义才能起作用。
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。