多行文字显示不完用省略号表示

一：单行文字溢出省略号显示！
 

单行文字显示不全，省略

.p2{

font-size: 30px;

}

1.先强制一行内显示文本

white-space: nowrap;


2.超出部分隐藏

overflow: hidden;

3.文字用省略号代替超出的部分

text-overflow: ellipsis;


/*能够在hover的时候显示出来全部的文本*/

.p2:hover {

text-overflow: inherit;

overflow: visible;

}

二：多行省略
 

overflow: hidden;

text-overflow: ellipsis;

display: -webkit-box;

-webkit-line-clamp: 3;

-webkit-box-orient: vertical