CSS控制的内容超过容器宽度后显示省略号

text-overflow:ellipsis属性在FF中是没有效果的。

同时应用: text-overflow:ellipsis; white-space:nowrap; overflow:hidden; 实现了所想要得到的溢出文本显示省略号效果
text-overflow是一个比较特殊的属性,在CSS手册中,这个属性是这样定义的:

语法: 
text-overflow : clip | ellipsis 
参数: 
clip :  不显示省略标记(...),而是简单的裁切
(clip这个参数是不常用的!)
ellipsis :  当对象内文本溢出时显示省略标记(...)
说明: 
设置或检索是否使用一个省略标记(...)标示对象内文本的溢出。
请您注意,text-overflow:ellipsis属性在FF中是没有效果的。

示例:
div { text-overflow : clip; }

   text-overflow是一个比较特殊的样式,我们可以用它代替我们通常所用的标题截取函数,而且这样做对搜索引擎更加友好,如:标题文件有50个 汉字,而我们的列表可能只有300px的宽度。如果用标题截取函数,则标题不是完整的,如果我们用CSS样式text-overflow: ellipsis,输出的标题是完整的,只是受容器大小的局限不显示出来罢了。

  关于text-overflow属性如何应用,我们作如下的说明讲解:

   text -overflow属性仅是注解,当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。我们想要实现溢出时产生省略号的效果。还必须定义:强制文 本在一行内显示(white-space:nowrap)及溢出内容为隐藏(overflow:hidden)。只有这样才能实现溢出文本显示省略号的效 果。

一般我们看到的比如新闻列表,为了使文字不回行,控制字数,会通过程序让多余的字符显示省略号,我们只使用CSS可以达到同样的效果,虽然不完美。

li { 
   width:50px; 
   white-space:nowrap; /*一行显示*/
   text-overflow:ellipsis; /*显示...*/
   overflow: hidden; /*缺少无效*/
   }

首先是一个容器,可以是div,li,td等等,先定义宽度,“white-space:nowrap”是强制在一行内显示所有文本,不回行。“text-overflow:ellipsis”就是关键了。

text- overflow是CSS3新增的属性,IE6以上版本支持。它可以带2个参数:clip [不显示省略标记(...),而是简单的裁切],ellipsis[当对象内文本溢出时显示省略标记(...)]。所以,这个方法是不支持Firefox 的。因此,我们还要加上一句overflow: hidden,让多余文字在ff中隐藏


你可能感兴趣的:(css,文本,省略)