关于固定高度和宽度，文字多少控制问题

今天在写页面的时候，遇到了一个显示问题，个人要求是：在一个固定长和宽的盒子中，文字若多了末尾显示“...”

首先要让文字显示“...”,给盒子加的样式是：

.intro .docIntro .docGood {
    width: 100%;
    line-height: 1.5;
    font-weight: bolder;
    font-weight: 400;
    text-indent: 1em;
    height: auto;
    max-height: 4.5em;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

以上显示的样式虽然有了“...”的效果，可是多余的文字仍是会显示在下一行。如图：

而后，为了解决这个问题，给样式再加一个

overflow: hidden;

这样就正常了。哈哈~~~

-webkit-line-clamp: 3;

这行代码是最多显示3行的意思哦@@