display: -webkit-box;

-webkit-line-clamp: 2;     /*多少行数之后显示为省略...*/

word-wrap: break-word;

word-break: break-all;

overflow: hidden;

text-overflow: ellipsis;

-webkit-box-orient: vertical;

display: block;

width: 72px;

overflow: hidden;

white-space: nowrap;

text-overflow: ellipsis;

上面的代码就是2行之后显示省略

如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览。

实现方法：

overflow: hidden;

text-overflow:ellipsis;

white-space: nowrap;

效果如图：

但是这个属性只支持单行文本的溢出显示省略号，如果我们要实现多行文本溢出显示省略号呢。

接下来重点说一说多行文本溢出显示省略号，如下。

实现方法：

display: -webkit-box;

-webkit-box-orient: vertical;

-webkit-line-clamp: 3;

overflow: hidden;

效果如图：

适用范围：

因使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端；

注：

-webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：

display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。

-webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。

实现方法：

p{position: relative; line-height: 20px; max-height: 40px;overflow: hidden;}

p::after{content: "..."; position: absolute; bottom: 0; right: 0; padding-left: 40px;

background: -webkit-linear-gradient(left, transparent, #fff 55%);

background: -o-linear-gradient(right, transparent, #fff 55%);

background: -moz-linear-gradient(right, transparent, #fff 55%);

background: linear-gradient(to right, transparent, #fff 55%);

}

效果如图：

适用范围：

该方法适用范围广，但文字未超出行的情况下也会出现省略号,可结合js优化该方法。

注：

将height设置为line-height的整数倍，防止超出的文字露出。

给p::after添加渐变背景可避免文字只显示一半。

由于ie6-7不显示content内容，所以要添加标签兼容ie6-7(如：…)；兼容ie8需要将::after替换成:after。

转自：大前端

CSS.05 -- 规避脱标 定位的盒子居中、CSS标签规范、溢出隐藏、内容移除(网页优化)、CSS精灵图

规避脱标   定位的盒子居中显示 Margin:0 auto : 只能让标准流的盒子居中对齐 当A是B的父系,B可以使用 margin-left:auto: 来获得相当于定位right:0:的效果 M ...

css文本溢出隐藏显示省略号(单行+多行)

文本超出若干行就换行,这个功能几乎每个文本浏览网站都会用到,实现它的办法也有很多,今天简单的介绍一下实现它的方法.  一. 单行文本不换行,并将超出文本隐藏 .box-content{     ove ...

CSS控制Span强制换行、溢出隐藏

CSS控制Span强制换行 word-wrap: break-word; word-break: break-all; white-space: pre-wrap !important; 盒子文字设置 ...

css文字溢出隐藏，及强制断句

只显示一行文字,便溢出隐藏 text-overflow: ellipsis; white-place: nowrap; overflow: hidden; 显示 n 行文字后便溢出隐藏  displa ...

CSS之文本溢出隐藏，不定宽高元素垂直水平居中、禁止页面文本复制

1.如何让不固定元素宽高的元素垂直水平居中 .center { position: absolute; top: 50%; left: 50%; background-color: #000; wid ...

css 文本换行 文本溢出隐藏用省略号表示剩下内容

正常文本的显示

CSS中隐藏内容的3种方法及属性值

CSS中隐藏内容的3种方法及属性值 (2011-02-11 13:33:59)   在制作网页时,隐藏内容也是一种比较常用的手法,它的作用一般有:隐藏文本/图片.隐藏链接.隐藏超出范围的内容.隐藏弹出 ...

多行溢出隐藏显示省略号功能的JS实现

在页面重构中,经常需要将过多的内容隐藏而显示部分.在单行文本中实现非常简单,但是在多行文本中,则需要根据实际选择不同的方式. 用CSS实现多行溢出隐藏的代码非常简单,但是兼容性也相对较低. displ ...

设置text-overflow文本溢出隐藏时的对齐问题

设置text-overflow: ellipsis后引起的文本对齐问题 最近在做网页的时候用到了文本溢出隐藏的功能,但是出现了一些小问题,下面先放上示例代码吧.

随机推荐

ubuntu14 查找并删除所有文件名中带有特定关键词的文件

http://askubuntu.com/questions/625219/how-to-search-and-delete-files-who-contain-specific-string-in- ...

nyoj 71 独木舟上的旅行(贪心专题)

独木舟上的旅行 时间限制:3000 ms  |  内存限制:65535 KB 难度:2   描述 进行一次独木舟的旅行活动,独木舟可以在港口租到,并且之间没有区别.一条独木舟最多只能乘坐两个人,且乘客 ...

Java注意的地方

oo: 单一原则(SRP) 开放封闭原则(OCP) 里氏替换原则(LSP) 依赖倒转原则(DIP) 接口分离原则(ISP) equals: 若两个对象equals为true,则他们的hashcode值 ...

炫龙炎魔T1笔记本 Win7 系统安装

系统链接:https://pan.baidu.com/s/1T5FdJf1jhTj78vEBYCXxyA 密码:rl7m 1.制作系统盘(下载文件中有教程),插好U盘,重启计算机 2.按F2进入BOS ...

PHP之引用

php数字月份转换为英语缩写 实现数字月份到英文月份缩写的转换 英语 1 => 'Jan', January 2 => 'Feb', February 3 => 'Mar', Mar ...

[C语言]逆序的三位数

---------------------------------------------------------------------------------------- //  main.c ...

Web图形开发

Web项目开发过程中要找到完美的图形解决方案比较困难,只能根据自己的需要,选择自己最合适的画图方案. Web图表一般有以下几种做法: (1)使用客户端控件技术 (2)使用服务器端生成图片 (3)使用富 ...

nginx并发连接控制模块ngx_http_limit_conn_module

模块: ngx_http_limit_conn_module 作用: 根据定义的key限制并发连接数 配置示例: http { limit_conn_zone $binary_remote_addr ...

SQLServer SELECT @@IDENTITY 遇到的坑

经常在写存储过程的时候获取当前插入后的ID都会用  @@IDENTITY 但是今天在用 @@IDENTITY的时候涉及到当前数据的插入会有insert触发器发生时,发现与实际插入的ID值对不上,网上查 ...

【我们开发有力量之二】利用javascript制作批量网络投票机器人(自动改IP)

帮朋友忙网络投票,粗粗地看了下,投票没有什么限制,仅有一个ip校验:每天每个ip仅能投票一次. 也就是说,可以写一个程序,自动更换IP地址(伪造IP地址),实现批量刷票的目的.于是我写了一个投票机器人 ...