CSS文本超出就隱藏並且顯示省略號的實現方法

CSS文本超出就隱藏並且顯示省略號是在開發網頁時很常見的需求，比如在列表頁中，當每行的文本內容過長時，超出顯示區域；再例如，當文本內容過多時，需截取部分內容顯示，並以省略號結尾。下面從多個方面介紹實現方法。

一、單行文本省略號

當文本內容超出一行時，可以使用以下CSS屬性實現單行文本省略號：

.line-clamp {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

上述代碼中，overflow: hidden;表示文本內容超出限定區域時隱藏；text-overflow: ellipsis;表示以省略號代替超出部分；white-space: nowrap;表示強制在一行內顯示，不允許自動換行。

二、多行文本省略號

當文本內容有多行時，可以使用以下代碼實現多行文本省略號：

.multi-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

上面的代碼中使用了CSS3的屬性：-webkit-box;、-webkit-line-clamp;、-webkit-box-orient;，它們的作用分別是將元素顯示為塊級表格布局、限制在一個塊元素中的文本行數、設置盒子內的子元素排列方式。需要注意的是，這種方法只適用於Safari和Chrome瀏覽器。

三、單行文本幕布效果

當需要將超出顯示區域的文本內容隨著滑鼠移動而移動，以達到「幕布」效果時，可以使用以下代碼實現：

.mask-text {
  position: relative;
  background: linear-gradient(to right, white 50%, rgba(255, 255, 255, 0) 100%);
  background-size: 200% 100%;
  background-position: 0 0;
  animation: mask 2s linear infinite;
}

@keyframes mask {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -100% 0;
  }
}

上述代碼中，使用了linear-gradient屬性實現「幕布」效果，即從白色到透明度線性變化，animation屬性實現動畫效果，使文本隨著滑鼠的移動呈現滾動效果。

四、響應式設計下的省略號

在響應式設計下，當屏幕尺寸變化時，文本內容需要隨之變化。為了保證省略號的有效顯示，可以使用以下代碼：

.responsive-clamp {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  max-width: 100%;
}

上述代碼中，使用了max-width屬性將元素最大寬度設置為100%，以適應不同尺寸的屏幕。同時，使用了CSS3屬性實現多行文本省略號，保證了文本內容的最佳顯示效果。

五、定製化省略號樣式

省略號是CSS提供的默認顯示樣式，但並不是每個網站都適用。當需要自定義省略號樣式時，可以使用以下CSS代碼：

.custom-clamp {
  overflow: hidden;
  text-overflow: "";
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.custom-clamp::after {
  content: "\02026";
  position: absolute;
  bottom: 0;
  right: 0;
  background-color: white;
  padding: 0 0.3em;
}

上述代碼中，使用了CSS3的::after偽元素實現了自定義省略號樣式。其中，content屬性用於定義省略號樣式，background-color和padding屬性用於控制樣式的背景色和內邊距。

六、總結

文章介紹了6種CSS文本超出就隱藏並且顯示省略號的實現方法，包括單行文本省略號、多行文本省略號、單行文本幕布效果、響應式設計下的省略號和定製化省略號樣式。這些方法結合實際需求，可以為網站開發者提供最佳的顯示效果，增強用戶體驗。