css3入门

CSS3中的text-overflow属性

字号+ 作者: 来源: 2014-11-16 21:49 我要评论( )

当通过把overflow属性值设定为“hiddden”的方法,将盒中容纳不下的元素隐藏时,如果使用text-overflow属性,可以在盒的末尾显示一个代表省略的符号“…”

text-overflow : clip | ellipsis

clip : 不显示省略标记(…),而是简单的裁切 (clip这个参数是不常用的!)
ellipsis : 当对象内文本溢出时显示省略标记(…)

text-overflow属性使用实例:

.demo p {
  overflow:hidden;
  width:150px;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

通过将white-space属性的值设置成nowrap,使得盒右端的内容不能换行,这样盒中的内容就在水平方向上溢出了。

text-overflow属性也是有Internet Explorer浏览器扩展出来的,被CSS 3所采纳的一个属性。

目前Firefox 5尚不支持text-overflow属性

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • divcss入门视频教程-DIVCSS布局第6课-CSS滤镜的应用

    divcss入门视频教程-DIVCSS布局第6课-CSS滤镜的应用

    2015-09-30 11:41

  • divcss入门视频教程-DIVCSS布局第5课-用CSS制作漂亮的菜单

    divcss入门视频教程-DIVCSS布局第5课-用CSS制作漂亮的菜单

    2015-09-30 11:40

  • divcss入门教程-DIVCSS布局第4课-设置页面和浏览器的元素

    divcss入门教程-DIVCSS布局第4课-设置页面和浏览器的元素

    2015-09-30 11:40

  • divcss入门教程-DIVCSS布局第3课-设置表格与表单的样式

    divcss入门教程-DIVCSS布局第3课-设置表格与表单的样式

    2015-09-30 11:38

网友点评