欢迎访问 生活随笔!

ag凯发k8国际

当前位置: ag凯发k8国际 > 前端技术 > css >内容正文

css

css控制的内容超过容器宽度后显示省略号 -ag凯发k8国际

发布时间:2024/9/16 css 19 豆豆
ag凯发k8国际 收集整理的这篇文章主要介绍了 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中隐藏

 

总结

以上是ag凯发k8国际为你收集整理的css控制的内容超过容器宽度后显示省略号的全部内容,希望文章能够帮你解决所遇到的问题。

如果觉得ag凯发k8国际网站内容还不错,欢迎将ag凯发k8国际推荐给好友。

  • 上一篇:
  • 下一篇:
网站地图