CSS3 text-overflow

简介:

作用

文本溢出时发生的事情。


用法

text-overflow: clip | ellipsis | string;

clip:修剪文本

ellipsis:显示省略号代表修剪文本

string:给定字符串代表修剪文本


兼容性

所有主流浏览器均兼容


搭配使用

overflow:hidden;(隐藏溢出)

white-space:nowrap;(规定段落中文本不换行)


Demo

http://codepen.io/makaiqian/pen/BmFfu


注意

  1. 只能运用于单行

  2. 多行可以通过jQuery实现。

原理:根据判定有没有越界,让超出部分用…代替。

目录
相关文章
|
6月前
|
前端开发
CSS margin
CSS margin。
42 1
|
6月前
|
前端开发
CSS 盒子模型(Box Model
CSS 盒子模型(Box Model。
43 1
|
6月前
|
前端开发
CSS:为什么看起来content-box更合理,但还是经常使用border-box?
CSS:为什么看起来content-box更合理,但还是经常使用border-box?
116 2
|
前端开发 JavaScript
css--position
css--position
|
6月前
|
前端开发
CSS position 小结
CSS position 小结
32 0
|
前端开发
CSS box model :盒子模型
CSS box model :盒子模型
110 0
CSS box model :盒子模型
|
前端开发
每日一学—CSS overflow与text-overflow与white-space属性
CSS overflow 属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条。text-overflow 属性指定当文本溢出包含它的元素时,应该如何显示。可以设置溢出后,文本被剪切、显示省略号 (...) 或显示自定义字符串(不是所有浏览器都支持)。white-space属性指定元素内的空白怎样处理。
293 0
每日一学—CSS overflow与text-overflow与white-space属性
|
前端开发 开发者 容器
CSS visibility与overflow属性 | 学习笔记
快速学习 CSS visibility 与 overflow 属性
CSS visibility与overflow属性 | 学习笔记
|
前端开发
CSS - List-style
CSS - List-style
101 0
CSS - List-style
|
编解码 前端开发 JavaScript
CSS - Position
CSS - Position
160 0
CSS - Position