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实现。

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

目录
相关文章
|
JavaScript 前端开发
CSS3 overflow-x 属性
定义和用法 overflow-x 属性规定是否对内容的左/右边缘进行裁剪 - 如果溢出元素内容区域的话。 提示:使用 overflow-y 属性来确定对上/下边缘的裁剪。 默认值: visible 继承性: no 版本: CSS3 JavaScript 语法: object.style.overflowX=”scroll” 语法 overflow-
2001 0
|
Web App开发 前端开发 JavaScript
CSS Overflow属性详解(转)
检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。所有对象的默认值是 visible ,除了 textarea 对象和 body 对象的默认值是 auto 。设置 textarea 对象此属性值为 hidden 将隐藏其滚动条。
662 0
|
Web App开发 前端开发 JavaScript
|
9月前
|
前端开发
CSS position 小结
CSS position 小结
40 0
|
编解码 前端开发 JavaScript
CSS - Position
CSS - Position
173 0
CSS - Position
|
前端开发
css position
DOCTYPE html> position pre{ font-size: 22px; } b{ font-size: 38px; font-family: "Microsoft Yahei"; } .
850 0
|
前端开发
CSS之Position详解
CSS之Position详解 CSS的很多其他属性大多容易理解,比如字体,文本,背景等。有些CSS书籍也会对这些简单的属性进行大张旗鼓的介绍,而偏偏忽略了对一些难缠的属性讲解,有避重就轻的嫌疑。CSS中主要难以理解的属性包括盒型结构,以及定位。
871 0
html style的width不起作用
一、 有些元素的默认情况下没有长度属性的,所以在其style内指定width属性是不会起作用的。 应对措施:使其浮动,float:left/right,浮动的元素长度和宽带都默认是0的,需要指定长度和宽度。
1050 0
|
Web App开发 前端开发 Windows
【前端Talkking】CSS系列——CSS深入理解之line-height
【前端Talkking】CSS系列——CSS深入理解之line-height
364 0

热门文章

最新文章

相关课程

更多