#text-overflow属性

关键字: 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">胡中齐Vinch</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>胡中齐Vinch</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">
<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>胡中齐Vinch</td></tr></table>
</body></html>

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

text-overflow 的兼容性:
测过ie6,ie7,ff3,safari,opera,chorme,只有ff3和opera不兼容

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 在项目的过程中有文字溢出,后来听同学说CSS3总有个属性可以解决,就是text-overflow。这篇文章用来总结...
    Gopal阅读 1,724评论 0 0
  • 本文参考:ccs2.1中文版规范 http://www.ayqy.net/doc/css2-1/cover.htm...
    孙雪冬阅读 5,775评论 0 2
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 6,872评论 0 11
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 5,929评论 0 2
  • 爱子心无尽,归家喜及辰。寒衣针线密,家信墨痕新。 见面怜清瘦,呼儿问苦辛。低徊愧人子,不敢叹风尘。 思尔为雏日,...
    Seankiven阅读 3,008评论 0 1

友情链接更多精彩内容