Limiting content with specified number of lines

過去我們使用下面這樣的設定

.container {
  width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

讓文字內容不會自動斷行、不顯示溢出的內容，同時使用 ellipsis 來加入「...」。不過這種方法的限制是，他最終只會變成一行。如果今天想要設定顯示多行的情況，可以採用 -webkit-line-clamp 的做法：

.container {
  display: -webkit-box;
  width: 100px;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;  
  overflow: hidden;
}

在這樣的情況下，就會顯示最多三行的內容，剩下的內容將會被隱藏。同時在可見範圍的最後會加上「...」

現在我們可以讓內容自動的「只呈現三行」，不過由於是 css 幫我們自動完成的，如果我們想要知道到底哪一個 container 當中的內容是完整展現、或者是被隱藏的話，可以透過選取該 element，然後比較 scrolHeight 與 clientHeight。

scrolHeight 代表要完整呈現內容所需要的高度

clientHeigh 是 container 當中的高度，包含 padding 但是不包含 border, margin 和 scrolbar 的高度

另外還有一個是 offsetHeight 則是 container 當中的高度，包含 padding, border, margin 和 scrolbar 的高度

所以只要比較 scrolHeight 與 clientHeight 就可以知道這個 container 當中的內容是否有被隱藏囉。

在最近的 task 當中，我透過這個方法，來決定是否要顯示打開 modal 的 button

<div #container class="ontainer">{{ content }}</div>
<div *ngIf="noteContainer.scrollHeight > noteContainer.clientHeigh" 
     (click)="openModal(content)"
>
     more
</div>