在CSS中，當一個元素的內容超出其寬度或高度限制時，我們通常可以使用“overflow: hidden”來隱藏超出部分，或者使用“overflow: scroll”來添加滾動條。但有時，我們需要為超出部分添加其他樣式，比如將其隱藏并用省略號代替，或者用點代替。

.ellipsis {
white-space: nowrap; /*強制一行顯示*/
overflow: hidden; /*超出部分隱藏*/
text-overflow: ellipsis; /*用省略號代替超出部分*/
 }
.dots {
white-space: nowrap; /*強制一行顯示*/
overflow: hidden; /*超出部分隱藏*/
font-size: 0; /*將字體大小設為0*/
 }
.dots::after {
content: "..."; /*添加點*/
font-size: 16px; /*重新設置字體大小*/
 }

以上是兩種常見的用點代替超出部分的方法。第一種方法使用了“text-overflow: ellipsis”，通過添加省略號來代替超出部分。第二種方法則是將字體大小設為0，并用CSS偽元素“::after”添加點，再重新設置字體大小。

需要注意的是，這兩種方法僅適用于單行文本。如果需要處理多行文本，可以使用CSS屬性“-webkit-line-clamp”來確定文本行數，然后使用省略號代替多余文本。例如：

.multilines {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; /*限制為三行*/
overflow: hidden;
text-overflow: ellipsis;
 }

代碼中，“display: -webkit-box”指定顯示方式為彈性盒子；“-webkit-box-orient: vertical”指定盒子方向為垂直；“-webkit-line-clamp: 3”則限制為三行，超出部分用省略號代替。

總之，用點代替超出部分在美化頁面中非常有用，可以讓頁面變得更加整潔美觀。在實際應用中，可以根據具體情況選擇合適的方法來處理超出部分。