本文目錄導(dǎo)讀：

1. 使用純CSS解決方案（兼容性較好）

解決CSS多行文本溢出顯示省略號問題

在網(wǎng)頁設(shè)計中，我們經(jīng)常遇到需要處理文本溢出的場景，當(dāng)文本內(nèi)容超過其容器所設(shè)定的固定高度時，單行的文本可以通過CSS的text-overflow屬性配合overflow和white-space屬性來實現(xiàn)溢出顯示省略號的效果，但如果是多行文本，處理方式就有所不同了，下面介紹一種解決多行文本溢出顯示省略號的方法。

一、使用CSS的display: -webkit-box屬性

對于WebKit內(nèi)核的瀏覽器（如Chrome和Safari），可以利用-webkit-box來展示多行文本溢出省略號的效果，具體做法是將display屬性設(shè)置為-webkit-box，并配合使用max-lines屬性來限制顯示的行數(shù)，示例如下：

.container {
  display: -webkit-box; /* 僅對Webkit內(nèi)核瀏覽器有效 */
  -webkit-line-clamp: 3; /* 限制顯示的行數(shù) */
  overflow: hidden; /* 隱藏超出部分 */
  text-overflow: ellipsis; /* 超出部分顯示省略號 */
  white-space: normal; /* 正常文本換行 */
}

這種方法僅適用于WebKit內(nèi)核的瀏覽器，對于其他瀏覽器可能需要額外的處理，因此在實際使用中要考慮兼容性問題。

使用純CSS解決方案（兼容性較好）

對于更廣泛的瀏覽器兼容性，可以使用純CSS的解決方案，結(jié)合偽元素和視口單位來實現(xiàn)多行文本溢出的省略號效果，示例如下：

.container {
  position: relative; /* 相對定位容器 */
  height: 60px; /* 設(shè)置容器高度 */
}
.container::before { /* 使用偽元素顯示主要內(nèi)容 */
  content: attr(data-content); /* 使用data屬性存儲文本內(nèi)容 */
  display: inline-block; /* 內(nèi)聯(lián)塊級元素 */
  position: absolute; /* ***定位 */
  top: 0; /* 定位在容器頂部 */
  left: 0; /* 定位在容器左側(cè) */
  width: 100%; /* 占滿容器寬度 */
  white-space: pre-line; /* 保持文本的換行符 */
  overflow: hidden; /* 隱藏超出部分 */
  text-overflow: ellipsis; /* 顯示省略號 */
}

HTML結(jié)構(gòu)中使用data屬性存儲文本內(nèi)容：<div class="container" data-content="這里是可能會溢出的多行文本...">。</div>，這種方法雖然可以實現(xiàn)多行文本的溢出省略效果，但需要在HTML結(jié)構(gòu)中添加額外的數(shù)據(jù)屬性，并且需要額外的樣式規(guī)則來處理細節(jié)，同時要注意偽元素的使用在不同瀏覽器中的兼容性問題，在實際應(yīng)用中可以根據(jù)項目需求選擇適合的方法來處理多行文本的溢出顯示省略號問題。