多行超出显示省略号:
<
style
>
div
{
width:
400px;
height:
60px;
line-height:
30px;
margin:
0
auto;
border:
1px
solid
#ccc;
padding:
0
10px;
text-overflow:
ellipsis;
display: -webkit-box;
-webkit-line-clamp:
2;
-webkit-box-orient:
vertical;
overflow :
hidden;
}
<
/
style
>
<
div
>
你好呀你好呀你好呀你好呀你好呀你好呀你好呀你好呀你好呀你好呀你好呀你好呀你好呀你好呀你好呀你好呀你好呀你好呀你好呀你好呀你好呀你好呀你好呀你好呀你好呀你好呀你好呀你好呀你好呀你好呀你好呀你好呀你好呀你好呀你好呀你好呀你好呀你好呀你好呀你好呀你好呀你好呀
</
div
>
一行超出显示省略号
<
style
>
div
{
width:
400px;
margin:
0
auto;
border:
1px
solid
#ccc;
padding:
0
10px;
line-height:
30px;
height:
30px;
text-overflow:
ellipsis;
white-space:
nowrap;
overflow :
hidden;
}
<
/
style
>
<
div
>
你好呀你好呀你好呀你好呀你好呀你好呀你好呀你好呀你好呀你好呀你好呀你好呀你好呀你好呀你好呀你好呀你好呀你好呀你好呀你好呀你好呀你好呀你好呀你好呀你好呀你好呀你好呀你好呀你好呀你好呀你好呀你好呀你好呀你好呀你好呀你好呀你好呀你好呀你好呀你好呀你好呀你好呀
</
div
>