CSS超出兩行及多行省略號的樣式設置

一、基礎使用

用CSS設置文本省略號，一般情況下只需要添加如下代碼即可：

/* 單行省略號 */
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;

/* 多行省略號 */
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;

代碼注釋中的第一段是單行省略號的常用設置，主要通過overflow:hidden; 和 white-space:nowrap; 來設置文本的隱藏和不換行，再加上text-overflow:ellipsis; 來顯示省略號。而第二段是多行省略號的常用設置，主要通過display: -webkit-box; 和 -webkit-line-clamp: 2; 來控制文本顯示的行數，並加上overflow: hidden; 來隱藏省略的多餘文本內容。

二、樣式設置

上述使用方法中提到的樣式效果相對簡單，只有一種省略號樣式，並且只能設置具體的行數。實際情況中，我們需要更多種類的省略號樣式，比如：多行省略號中省略號位置的調整、省略號和文本間距的控制等等。下面是一些常用的技巧，通過巧妙地CSS設置，可以實現更多樣式效果。

1. 調整多行省略號中省略號的位置

默認情況下，多行省略號中省略號的位置是居中的，想要調整位置需要使用一些技巧，下面是一種方法：

.clamp {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  line-height: 1.2;  /* 行高 */
  max-height: 3.6em; /* 最大高度 = 行高 x 行數 */
  font-size: 16px;
}
/* 使用偽元素，實現省略號位置的調整 */
.clamp::after {
  content: "...";
  position: absolute;
  right: 0;         /* 距離父元素右側 */
  bottom: 0;        /* 距離父元素底部 */
  padding-left: 30px; /* 省略號和文本間距，根據實際情況調整 */
}

上述代碼中，.clamp 是包含文本內容的父元素，通過設置max-height 和 line-height 控制文本顯示的行數和行高。其中line-height * 行數 = max-height。在偽元素::after中，使用position:absolute; 將省略號定位到父元素右下角，通過調整padding-left 控制省略號與文本的間距，從而實現省略號位置的調整。

2. 調整省略號和文本的間距

我們經常需要調整省略號與文本的間距，讓布局更加美觀。這裡提供兩種方法：

/* 方法一：使用 text-indent */
.clamp {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  line-height: 1.2;  /* 行高 */
  max-height: 3.6em; /* 最大高度 = 行高 x 行數 */
  font-size: 16px;
  text-indent: 1em;  /* 省略號和文本間隔，根據實際情況調整 */
}

/* 方法二：使用 margin-right */
.clamp {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  line-height: 1.2;  /* 行高 */
  max-height: 3.6em; /* 最大高度 = 行高 x 行數 */
  font-size: 16px;
}
/* 設置省略號與文本間隔 */
.clamp::after {
  content: "...";
  float: right;     /* 省略號靠右顯示 */
  margin-right: 5px; /* 省略號和文本間隔，根據實際情況調整 */
}

方法一中，使用text-indent 設置文本縮進的大小，從而達到控制省略號和文本間距的效果。在方法二中，使用CSS浮動來將省略號靠右顯示，再通過margin-right 屬性來控制省略號和文本間的距離。

三、總結

通過本文的介紹，相信讀者們可以掌握常見的CSS超出兩行及多行省略號的樣式設置方法。除了基礎使用外，更多樣式設置需要結合實際情況進行探索，靈活應用CSS技巧，才能實現更加美觀實用的效果。