CSS 將過長的文字取代成「...」

Jul 9, 2022 by Hsiangming Lo

在排版網頁時，因為設計需要，會想讓網頁中的文字不要超出所在的元素。

在網頁元素加下以下CSS，文字只有單行，超出元素範圍的文字會隱藏，文字的最後會加上「…」。

p {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

如果需要多行的話，可以使用以下語法。

p {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}