在CSS中，我們可以使用text-overflow屬性來(lái)控制文字在容器中的顯示方式，當(dāng)文本內(nèi)容超出容器寬度時(shí)，可以通過(guò)設(shè)置text-overflow為"ellipsis"來(lái)實(shí)現(xiàn)文字收縮成三個(gè)點(diǎn)的效果。

下面是一個(gè)示例代碼：

HTML部分：

<div class="container">
  這是一段很長(zhǎng)的文本，它可能會(huì)超出容器的寬度。
</div>

CSS部分：

.container {
  width: 100px; /* 容器寬度 */
  white-space: nowrap; /* 防止文本換行 */
  text-overflow: ellipsis; /* 超出寬度時(shí)顯示省略號(hào) */
  border: 1px solid #000; /* 添加邊框以便更清晰地看到效果 */
}

在這個(gè)示例中，當(dāng)文本內(nèi)容超出100px的容器寬度時(shí)，文本將收縮成三個(gè)點(diǎn)（...）。white-space: nowrap;屬性用于防止文本在容器中自動(dòng)換行。border屬性則用于添加邊框，以便更清晰地看到文本收縮的效果。