实际开发中,我们经常遇见因高度不够,导致文案内容溢出.
.demo{
width: 200px;
height: 40px;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2; /* 超出两行*/
-webkit-box-orient: vertical;
overflow: hidden;
}
以上属性实现了一个超出两行之后用"…"代替的效果.