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

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

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

.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行的意思哦@@

转载于:https://my.oschina.net/u/2374203/blog/779282