CSS3属性之text-overflow:ellipsis,指定多行文本中任意一行显示...

对于text-overflow:ellipsis，文本超出部分显示...，但要实现这个效果，却有一些必备条件，如下：

div{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;/*其他属性*/
}

三个条件缺一不可，但是这些属性只能实现一行文本显示...，而对于要显示多行文本，并且只有最后一行显示...，就不适用了，所以需要修改样式，如下：

div{overflow: hidden;text-overflow: ellipsis;height: 60px;display: -webkit-box; -webkit-line-clamp: 3; /*可指定任一行显示...效果*/ -webkit-box-orient: vertical; /*此时不需要white-space:nowrap;*/
}

看到新增的属性，应该就知道，他不是通用的，只针对webkit内核浏览器，而对于最TM神奇的IE浏览器，只能使用插件了，jq插件地址：http://dotdotdot.frebsite.nl/，使用方法，如下：

转载于:https://www.cnblogs.com/web-wjg/p/7424403.html

CSS3属性之text-overflow:ellipsis,指定多行文本中任意一行显示...相关推荐

css3 描两个边,CSS3 / 指定四条边中图像的显示方法 - 汇智网
绘制四个角不同半径的圆角边框可以在border-image属性中指定元素四条边中的图像是以拉伸的方式显示,还是以平铺的方式显示,指定方法如下所示. border-image: url(文件路径) A ...
html5文字特效教程视频,IT兄弟连 HTML5教程 CSS3属性特效自定义文字
原标题:IT兄弟连 HTML5教程 CSS3属性特效自定义文字字体使用是网页设计中不可或缺的一部分.经常地,我们希望在网页中使用某一特定字体,但是该字体并非主流操作系统的内置字体,这样用户在浏览页 ...
【04】HTML5+CSS3：01-HTML5新增标签、多媒体标签、input标签、新增表单属性、CSS3属性选择器、伪元素选择器、2D转换
文章目录 HTML5 第一天一.什么是 `HTML5` 二.`HTML5 ` 新增标签三.多媒体音频标签四.多媒体视频标签五.新增 input 标签六.新增表单属性七.`CSS3 ` 属性 ...
【CSS 文本属性（Text）】
CSS 文本属性 CSS 文本属性(Text) 1. color 属性: 颜色的前景色 (文本/文本装饰/边框/当前颜色的颜色) 2. direction 属性: 文本/表列/水平溢出的方向 (文 ...
css3属性基本骨架
css3属性浏览器前缀 -ms-代表IE浏览器 -khtml-代表苹果浏览器 -moz-代表火狐浏览器 -o-代表欧朋浏览器 -webkit-代表谷歌浏览器字体 1.text-shadow设置文字 ...
CSS3 属性样式总结记录（图文）
CSS3 属性样式总结记录 1 .边框-背景 border-image 设置所有边框图像的速记属性. 3 border-radius 一个用于设置所有四个边框- *-半径属性的速记属性 3 box-s ...
介绍 10 个 CSS3 属性
border-radius border-radius border-radius是一大堆CSS3属性中最受欢迎的一种,border-radius是CSS3中级别最高的一个属性.当设计者害怕一个层在 ...
css3学习之 css选择器(css3 属性选择器)
这是上一篇css选择器介绍里面内容比较详细..大家可以看看下面我将结合<HTML 5与css 3权威指南>这本书对css选择器再进行记录下里面有些个人见解如果看客觉得有问题.可以提出 ...
低版本浏览器使用最新渲染模式以免IE不支持CSS3属性
1.让IE使用最新的渲染模式,告诉低版本浏览器使用最新渲染模式以免IE不支持CSS3属性 <meta http-equiv="X-UA-Compatible" content ...

CSS3属性之text-overflow:ellipsis,指定多行文本中任意一行显示...

CSS3属性之text-overflow:ellipsis,指定多行文本中任意一行显示...相关推荐

最新文章

热门文章