单行截断

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

此方法兼容到ie6过。不过只能单行。

多行截断

.wrap { width: 200px;}.ellipsis { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}

<div class="wrap"> <div class="ellipsis"> 《宝可梦》，另有常见非官方译名：《口袋妖怪》(中国大陆官方译名)、《宠物小精灵》(中国香港译名)、《神奇宝贝》（中国台湾译名），是由Game Freak和Creatures株式会社开发</div> </div>

此方法webkit私有，并且使用flex布局，只得在移动端和高版本 -webkit- 系列浏览器使用。

多行截断2

利用浮动元素特性模拟最后的省略号。

<div class="wrap"> <div class="text"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos labore sit vel itaque delectus atque quos magnam assumenda quod architecto perspiciatis animi. </div></div>

.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; /* 为三个省略号的宽度 */ width: 3em; /* 使盒子不占位置 */ margin-left: -3em; /* 移动省略号位置 */ position: relative; left: 100%; top: -20px; padding-right: 5px; /*background-color: #FFF;*/ background: -webkit-linear-gradient(left, transparent 0%, #FFF 50%, #FFF 100%); background: linear-gradient(to right, transparent 0%, #FFF 50%, #FFF 100%); text-align: right;}

兼容性好，对各大主流浏览器有好的支持。

响应式截断，根据不同宽度做出调整。

文本超出范围才显示省略号，否则不显示省略号。

但是很麻烦，有些hack性质