CSS一行省略

一、加省略號的實際需求

在前端開發中，經常會遇到需求要求對某個元素內的文字或內容進行省略，以達到更好的頁面展示效果。比如，我們的網站可能會有很多長篇文章，如果不對文章進行省略，那麼有可能在手機端或者窄屏設備上就會出現排版混亂的現象。因此，CSS一行省略就成為了開發中的一個常用技巧。

舉個例子，我們有如下一段簡單的HTML結構：

<div class="content">
  <p>這是一段很長很長很長很長很長的文本內容……</p>
</div>

為了使這段文本內容在頁面上展示時能夠更加美觀，我們可以使用CSS的一行省略來讓這段內容以省略號的形式展示：

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

這段代碼的作用是：

首先，我們把父元素的高度設為固定的數值，然後把子元素的height設為100%，這樣這個子元素的高度就與父元素高度相同了。
接着，我們給

元素加上了一個display: -webkit-box;的屬性，這個屬性意思是把

元素作為彈性伸縮容器來顯示，可以自動調整子元素的寬高來適應容器。

但是，這樣設置後，文本內容也會像一個長彈性盒子一樣隨着屏幕寬度不停地伸縮，所以我們需要加上一些額外的設置，比如：

content {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

這樣，我們就可以在寬度不夠的時候用省略號代替了我們定義的元素的文本內容。這在顯示產品名稱、用戶名等內容時非常有用和實用。

二、實現方法及注意事項

實現一行省略的方式有多種，這裡我們介紹其中比較常見的三種方法。

1. ellipsis

這種方法需要在需要省略的元素中添加三個CSS樣式：

text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;

這樣就可以實現一行省略了。

2. line-clamp

這種方法是CSS3新增的樣式，它可以實現對整段文本的多行省略。具體方法是：

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

這樣樣式設置後，我們的文本將最多只會顯示兩行，超過兩行則被省略。

3. calc

這種方法需要計算省略的長度，適用於一些內容長度不固定的情況。具體方法是：

content {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.content p {
  width: calc(100% - 50px);
  display: inline-block;
  vertical-align: top;
}

這樣我們就可以在文本長度超過設定值時實現自動省略了。

三、小結

CSS一行省略是前端開發中常用的技術，通過以上三種方式的介紹，我們可以對這個實用技巧有進一步的了解和掌握。記得在實際開發過程中，要根據需要選擇合適的省略方式，並注意設置相應的CSS樣式以達到最佳的效果。