關於固定高度和寬度，文字多少控制問題

今天在寫頁面的時候，遇到了一個顯示問題，個人要求是：在一個固定長和寬的盒子中，文字若多了末尾顯示「...」

首先要讓文字顯示「...」,給盒子加的樣式是：

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