text-overflow

于 2011-11-20 16:37:56 发布 · 83 阅读

文章标签：

#css3 #text-overflow

css3 专栏收录该内容

53 篇文章

订阅专栏

本文介绍如何使用CSS属性text-overflow来实现文本溢出时显示省略号的效果，并附带了兼容不同浏览器的代码示例。

简单记录，学习

text-overflow： clip | ellipsis

clip 不显示省略标记（...），而是简单的裁剪。

ellipsis 当对象内文本溢出时显示省略标记（...）

说明：

要实现溢出时候产生省略的效果还需要定义：强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden）

兼容性：

text-overflow : clip

text-overflow : ellipsis

.text_overflow{
   width:120px;                    //定义宽度
   white-space:nowrap;
   text-overflow:ellipsis;
   -o-text-overflow:ellipsis;   //兼容opera
   overflow:hidden;           
}
/*
firefox目前不支持
*/