最近工作经常会遇到这样的UI设计图，两行内容增多出现省略号，一般这样的解决方法我总会直接overflow:hidden隐藏，可是这样他不会出现三个省略号，下面给大家想到一个很easy的方法分享一下；
方法一：适合PC和移动端，最主要的就是这段js，大概是这样的原理： 1）获取所有的元素.txt,通过遍历循环，判断他的内容个数，如果他的内容大于20（这个数值可以随意定义，大概范围在你的一行是多少个字，根据两行显示字体总数定义这个数值范围）； 2）获取当前的对象，将他的内容设置成你截取的这段文字，通过字符串拼接添加省略号
$(".txt").each(function() { if ($(this).text().length > 20) { $(this).html($(this).text().replace(/\s+/g, "").substr(0, 20) + "...") } })
以下是代码，大家可以参考。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> * { margin: 0; padding: 0; } .txt { width: 200px; height: 48px; background: pink; line-height: 24px; background: #ddd; color: #f00; margin-bottom: 10px; overflow: hidden; } </style> </head> <body> <div class="main"> <p class="txt">大学理学硕士,9 年证券从业经历。曾任易方达基金管理有限公司金属、非金属行业研究员,2007 年 9 月加入国投瑞银基金管理有限公司研究部。2014 年 7 月 24 日起任国投瑞银景气行业证券投资基金的基金经理,2014年 11 月 22 日起兼任国投瑞银美丽中国灵活配置混合型证券投资基金基金经理,2015 年 3 月 14 日起兼任国投 </p> <p class="txt"> 要使用正则表达式，不能使用 str.replace("\r\n", newString); ，这会导致只替换第一个匹配的子字符串。 母字符串中不一定 \r\n 会同时存在，也许只有 \n，没有 \r 也是可能的。 replace方法的语法是：stringObj.replace(rgExp, replaceText) 其中stringObj是字符串(string)，reExp可以是正则表达式对象(RegExp)也可以是字符串(string)，replaceText是替代查找到的字符串。。为了帮助大家更好的理解，下面举个简单例子说明一下 </p> <p class="txt">好的哈哈的山东省很多事借助庞大的投资借助庞大的投资借助庞大的投资借助庞大的投资借助庞大的投资 </p> <p class="txt">董晗先生,中国籍,南京大学理学硕士,9 年证券从业经历。曾任易方达基金管理有限公司金属、非金属行业研究员,2007 年 9 月加入国投瑞银基金管理有限公司研究部。2014 年 7 月 24 日起任国投瑞银景气行业证券投资基金的基金经理,2014年 11 月 22 日起兼任国投瑞银美丽中国灵活配置混合型证券投资基金基金经理,2015 年 3 月 14 日起兼任国投 </p> </div> </body> <script type="text/javascript" src="js/zepto.min.js"></script> <script type="text/javascript"> // 这个可以实现多行的，内容增多显示省略号 $(".txt").each(function() { if ($(this).text().length > 20) { $(this).html($(this).text().replace(/\s+/g, "").substr(0, 20) + "...") } }) // 这个不太实际，因为只能解决一行的，如果多行内容，显示的内容都一样 // var $len = $(".txt").text().length; // if ($len > 30) { // var $main = $(".txt").text().replace(/\s+/g, "").substr(0, 30) + "..."; // $(".txt").html($main) // } </script> </html>
方法二：CSS3实现，适合移动端，PC兼容性不是太好 -webkit-line-clamp 是一个 不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。 限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他外来的WebKit属性。常见结合属性： display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。 -webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。 text-overflow，可以用来多行文本的情况下，用省略号“...”隐藏超出范围的文本 。 语法： -webkit-line-clamp：<number> 默认值： ? ?表示不清楚； 适用于：块元素 继承性：无 动画性：否 计算值：指定的值 取值： <number>： 块元素显示的文本的行数。
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> </head> <body> <p style=" overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; "> static：对象遵循常规流。top，right，bottom，left等属性不会被应用。 relative： 对象遵循常规流，并且参照自身在常规流中的位置通过top，right，bottom，left属性进行偏移时不影响常规流中的任何元素。 absolute：对象脱离常规流，使用top，right，bottom，left等属性进行绝对定位，盒子的偏移位置不影响常规流中的任何元素，其margin不与其他任何margin折叠。fixed：对象脱离常规流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。center：对象脱离常规流，使用top，right，bottom，left等属性指定盒子的位置或尺寸大小。盒子在其包含容器垂直水平居中。盒子的偏移位置不影响常规流中的任何元素，其margin不与其他任何margin折叠。（CSS3）page：盒子的位置计算参照absolute。盒子在分页媒体或者区域块内，盒子的包含块始终是初始包含块，否则取决于每个absolute模式。（CSS3） sticky： 对象在常态时遵循常规流。它就像是 relative 和 fixed 的合体，当在屏幕中时按常规流排版，当卷动到屏幕外时则表现如fixed。该属性的表现是现实中你见到的吸附效果。（CSS3）* CSS3新增属性可能存在描述错误及变更，仅供参考，持续更新 </p> </body> </html>
一行内容增多显示省略号，代码如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> * { margin: 0; padding: 0 } .box { width: 12.188rem; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; background: #ccc; } </style> </head> <body> <p class="box">经查证，古装造型的照片来自1993年播出的电视剧《千岁情人》，在剧中王菲扮演一个活了千年的不老女子，古装扮相也十分出众，白衣飘飘，气质动人。</p> </body> </html>
