有些内容过多，不想全部显示所以进行多行文字截取的效果，如下图：

想必大家写ui的过程，有遇到过吧？看着似乎很简单，但加上以下几个条件，似乎就没那么简单了

较好的兼容，对各大主流浏览器有好的支持响应式截断，根据不同宽度做出自动调整文本超出范围才显示省略号，反之不显示省略号省略号位置显示刚好

一般我们文本截断分为两种，一个是单行截断、一个是多行截断。

单行超出截断

单行截断就很简单了，我们常用到的 text-overflow:ellipsis 。

代码如下：

div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}

效果：

单行超出截断

多行超出截断

多行超出截断，一般有三种方式

-webkit-line-clamp利用定位元素实现多行文本截断利用float 特性实现多行文本截断

-webkit-line-clamp

缺点：只有 webkit 内核的浏览器支持， Firefox, IE 浏览器等都不支持。

优点: 简单。

使用场景：多用于移动端页面，移动设备浏览器更多是基于 webkit 内核，除了兼容性不好，实现截断的效果不错。

代码如下：

div { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}

它需要和 display、 -webkit-box-orient 和 overflow 结合使用。

display:-webkit-box; 必须结合的属性，将对象作为弹性伸缩盒子模型显示-webkit-box-orient; 必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式。text-overflow:ellipsis; 可选属性，可以用来多行文本的情况下隐藏超出的文本范围，以 ‘...’的方式显示

效果：

-webkit-line-clamp 的方式多行文本截断

利用定位元素实现多行文本截断

缺点： 这种方式无法识别文字的长短，当文本超出范围才显示省略号，否则不显示省略号，因为是我们人为地在文字末尾添加一个省略号效果，就会导致它跟文字其实没有贴合的很紧密，遇到这种情况可以通过添加 word-break:break-all; 使一个单词能够在换行时进行拆分。

优点：

兼容性好，对各大主流浏览器有好的支持响应式截断，根据不同宽度做出调整

使用场景：文字内容较多，确定文字内容一定会超过容器。

代码如下：

p { position: relative; line-height: 18px; height: 36px; overflow: hidden;}p::after { content: "..."; font-weight: bold; position: absolute; bottom: 0; right: 0; padding:0 20px 1px 45px; /* 美化'...'省略部分 */ background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(white), color-stop(50%, white)); background: -moz-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white); background: -o-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white); background: -ms-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white); background: linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);}

效果：

实现原理：通过定位伪元素绝对定位到行尾并遮住文字，再通过 overflow:hidden隐藏多余文字。

利用定位元素实现多行文本截断

缺点：和 利用定位元素实现多行文本截断 方式一样是模拟省略号的，所以显示位置有时候没办法刚刚好盖住文本，所以可以考虑，可以通过添加 word-break:break-all; 使一个单词能够在换行时进行拆分。

优点：

兼容性好，对各大主流浏览器有好的支持响应式截断，根据不同宽度做出调整文本超出范围才显示省略号，否则不显示省略号（解决 利用定位元素实现多行文本截断 方式，文本不超出也显示问题）

使用场景：文字内容较多，确定文字内容无法判断是否超过容器。

代码如下：

html结构

<div class="wrap"> <div class="text"> 今日头条是北京字节跳动科技有限公司开发的一款基于数据挖掘的推荐引擎产品，为用户推荐信息，提供连接人与信息的服务的产品。 </div></div>

css

.wrap { height: 40px; line-height: 20px; overflow: hidden;}.wrap .text { float: right; margin-left: -5px; width: 100%; word-break:break-all;}.wrap::before { float: left; width: 5px; content: ''; height: 40px;}.wrap::after { float: right; content: "..."; height: 20px; line-height: 20px; padding-right: 5px; text-align: right;/* 为三个省略号的宽度 */ width: 3em;/* 使盒子不占位置 */ margin-left: -3em;/* 移动省略号位置 */ position: relative; left: 100%; top: -20px; padding-right: 5px; /* 美化'...'省略部分 */ background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(white), color-stop(50%, white)); background: -moz-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white); background: -o-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white); background: -ms-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white); background: linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);}

效果：