首页
Javascript
Html
Css
Node.js
Electron
移动开发
工具类
服务端
浏览器相关
前端收藏
其他

text-overflow:clip | ellipsis 单行截断文字

2012年11月23日 发布 阅读(301) 作者:懒炖

text-overflow属性:

语法:text-overflow : clip | ellipsis

clip:不显示省略标记(…),而是简单的裁切。

ellipsis:当对象内文本溢出时显示省略标记(…)

注:要实现溢出时产生省略号的效果,CSS中还必须定义:强制文本在一行内显示(white-space:nowrap)及溢出内容为隐藏(overflow:hidden)

text-overflow属性只对固定宽度的单行文字起作用,对于多行文字是失效的(多行文字截断字段可以用js或后端php等语言)

例:

  1. .clip {
  2. text-overflow:clip;
  3. overflow:hidden;
  4. white-space:nowrap;
  5. width:150px;
  6. }
  7. .ellipsis {
  8. text-overflow:ellipsis;
  9. overflow:hidden;
  10. white-space:nowrap;
  11. width:150px;
  12. }

text-overflow:clip

不显示省略号,只是简单的截断文字

text-overflow:ellipsis

当一段文字溢出时,显示省略号

浏览器兼容:

就当前时间(2012年11月23号),测试了IE6-9,Opera,Safari,Firefox,chrome都是支持的,所以应该可以放心使用!

版权声明:本站文章除特别声明外,均采用署名-非商业性使用-禁止演绎 4.0 国际 许可协议,如需转载,请注明出处

评论

  •