最近工作经常会遇到这样的UI设计图，两行内容增多出现省略号，一般这样的解决方法我总会直接overflow:hidden隐藏，可是这样他不会出现三个省略号，下面给大家想到一个很easy的方法分享一下；
最主要的就是这段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>
最主要的就是这段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>
浙公网安备 33010602011771号