<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.bootcss.com/jquery/2.2.0/jquery.js"></script>
</head>
<style type="text/css">
* {
padding:
0;
margin:
0;
}
.
box {
margin-top:
20px;
height:
47px;
width:
300px;
font-size:
16px;
border:
1px solid red;
}
.
inbox {
border:
1px solid green;
}
</style>
<body>
<div class="box">
<div class="inbox">
测试数据测试数据测试数据
</div>
</div>
<div class="box">
<div class="inbox">
测试数据测试数据测试数据测试数据测据测试数据
测试数据测试数据测试数据测试数据测试数据测试
数据测试数据测试数据
</div>
</div>
</body>
<script type="text/javascript">
$(
function() {
/*
* 一定要注意先后顺序
* 第一步先增加省略号
*/
$(
".box").
each(
function(i) {
var divH =
$(
this).
height();
var $p =
$(
".inbox",
$(
this)).
eq(
0);
while(
$p.
outerHeight() >
divH) {
$p.
text(
$p.
text().replace(
/(\s)*([a-zA-Z0-9]+|\W)(\.\.\.)?$/,
"..."));
};
});
/*
* 第二步 再改变行高
* 两个顺序不要放反了
*/
var inbox_len =
$(
'.inbox').
length;
for(
var i =
0;
i <
inbox_len;
i++) {
var text_h =
$(
'.inbox').
eq(
i).
height();
console.
log(
text_h);
if(
text_h <
40) {
//小于40是为了做判断 父元素div的高是47px
$(
'.inbox').
eq(
i).
css(
'line-height',
'47px');
}
};
});
</script>
</html>
转载请注明原文地址: https://www.6miu.com/read-18272.html
