text-overflow使用文字超多div的宽度或超过在table中<td>
2014-08-21 11:35
495 查看
关键字:text-overflow:ellipsis
语法:text-overflow:clip | ellipsis
取值
clip:默认值.不显示省略标记(...),而是简单的裁切.
ellipsis: 当对象内文本溢出时显示省略标记(...).
可惜text-overflow 还只是ie的私有属性而已,也没被收录到w3c标准里.
如果想让某个容器(div或者li或者...块级元素)显示一行文字,当文字内容过多时,不换行,而是出现...
这样写:例如
注意: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.一定要给table定义table-layout:fixed;只有定义了表格的布局算法为fixed,下面td的定义才能起作用。
语法:text-overflow:clip | ellipsis
取值
clip:默认值.不显示省略标记(...),而是简单的裁切.
ellipsis: 当对象内文本溢出时显示省略标记(...).
可惜text-overflow 还只是ie的私有属性而已,也没被收录到w3c标准里.
如果想让某个容器(div或者li或者...块级元素)显示一行文字,当文字内容过多时,不换行,而是出现...
这样写:例如
<!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,当文字内容过多时,不换行,而是出现...
这样写:例如:
<!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>
注意:
1.一定要给table定义table-layout:fixed;只有定义了表格的布局算法为fixed,下面td的定义才能起作用。
相关文章推荐
- td内容自动换行 ,td超过宽度显示点点点… , td 使用 overflow:hidden 无效,英文 数字 不换行 撑破div容器
- table表格中文本溢出text-overflow:ellipsis使用中td表格宽度失效问题
- (礼拜一log)前端开发:<td> 标签的 colspan 属性 & 两个div并排、一个宽度固定的实现方法
- Android UI设计之<六>使用HTML标签,实现在TextView中对部分文字进行加粗显示
- align属性在<table><td>标签中的使用
- 使用css制作三角,兼容IE6,用到的标签<div><s><span>
- 让HTML中的文本框<input type="text">中的文字垂直居中
- 如何使用jQuery去掉指定标签里所有文字内容对应的链接,即去掉<a>标签
- (中文排版CSS心得)----固定宽度汉字截断 —— 使用text-overflow!
- 内容超出表格<td>宽度则自动隐藏
- 在使用struts标签时,把<s:if>中的test写成了text
- div+CSS设置一行内文字超过宽度不换行且不显示
- .NET GridView使用滚动条(通过<div>)
- <display:table>使用
- td 内容自动换行 table表格td设置宽度后文字太多自动换行
- 使用<frameset><frame/><frame/></frameset> 布局页面 (div+css布局 和frameset布局,两种并列策略)
- android中使用TextView来显示某个网址的内容,使用<ScrollView>来生成下拉列表框
- 在<table>或<div>中如何让传入的文本自动换行
- 使用DELETE ADJACENT DUPLICATES FROM <table>注意
- 使用css制作三角,兼容IE6,用到的标签<div><s><span>