<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<style>
span{
font-size: 16px;
}
.box1{
width: 150px;
height: 80px;
line-height: 80px;
background: #ddd;
}
.box1 span{
display:inline-block;
line-height:20px;
vertical-align: middle;
}
.box1 b{
display: inline-block;
width: 16px;
height: 16px;
line-height: 16px;
text-align: center;
background: goldenrod;
margin: 2px;
color: #fff;
}
.box2{
background: #ddd;
width: 150px;
height: 80px;
display:flex;
align-items:center;
overflow: hidden;
}
.box2 b{
display: inline-block;
width: 16px;
height: 16px;
line-height: 16px;
text-align: center;
background: goldenrod;
margin: 2px;
color: #fff;
}
.box2 span {
overflow:hidden;
text-overflow:-o-ellipsis-lastline;
text-overflow:ellipsis;
display:-webkit-box;
display:-moz-box;
-webkit-line-clamp:2;
-moz-line-clamp:2;
line-clamp:2;
-webkit-box-orient:vertical;
-moz-box-orient:vertical;
}
.box3{
width: 150px;
height: 80px;
line-height: 80px;
background: #ddd;
box-sizing: border-box;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.box3 span{
padding-right: 10px;
display:inline-block;
line-height:20px;
vertical-align: middle;
height: 38px;
overflow: hidden;
position: relative;
}
.box3 b{
display: inline-block;
width: 16px;
height: 16px;
line-height: 16px;
text-align: center;
background: goldenrod;
margin: 2px;
color: #fff;
}
</style>
</head>
<body>
<h2>理想情况下在显示的时候字数就不要过多</h2>
<h4>文本里面还包裹有标签的单行或多行文本居中</h4>
<div class="box1">
<span><b>1</b>大家好,我是东,我来自南方</span>
</div>
<br />
<div class="box1">
<span><b>2</b>大家好,我是东</span>
</div>
<br />
<div class="box1">
<span><b>3</b>大家好,我是东,我来自南方,南方四季如春,很少下雪</span>
</div>
<h4>文本里面还包裹有标签的,超过两行显示...(ie无效)</h4>
<div class="box2">
<span><b>1</b>大家好,我是东,我来自南方,南方四季如春,很少下雪很少下雪很少下雪很少下雪很少下雪</span>
</div>
<h4>文本里面还包裹有标签的,超过两行显示...兼容ie</h4>
<div class="content">
<!--动态-->
</div>
<script src="jquery.min.js"></script>
<script>
iefun()
function iefun() {
var sd=[
'大家好',
'大家好,我是东,我来自南方,南方四季如春,很少下雪很少下雪很少下雪很少下雪很少下雪'
];
var shtml='';
for(var i=0,len=sd.length;i<len;i++){
if(sd && sd.length>0){
for(var i=0,len=sd.length;i<len;i++){
console.log(sd[i].length);
shtml+='<div class="box3">'
+' <span><b>1</b><em>'+ ( sd[i].length>13 ? sd[i].substr(0,12)+'...' : sd[i] ) +'</em></span>'
+' </div>';
}
}else{
shtml='暂无数据';
}
}
$('.content').html(shtml);
}
</script>
</body>
</html>