在 CSS 中，我們可以使用text-overflow屬性來實現用點代表一行的顯示效果。該屬性的取值有以下幾種：

text-overflow: clip; /*默認值，將文本截斷但不顯示省略號*/
text-overflow: ellipsis; /*使用省略號代替被截斷的文本*/
text-overflow: string; /*使用指定的字符串代替被截斷的文本，需指定content屬性*/

當文本溢出了容器的寬度時，我們可以使用overflow: hidden;屬性來隱藏多余的文本，并配合text-overflow屬性來顯示省略號或指定的字符串。

下面是一個示例，我們將一個長文本放在一個寬度為 200px 的容器內，當文本超過容器寬度時顯示省略號。

<div class="container">
<p class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eleifend erat augue,
eget pharetra purus porta euismod. Vestibulum consectetur ligula et nibh maximus,
consequat ultrices purus malesuada. Donec vitae enim tortor. Mauris eu sapien ligula.
In euismod interdum mi, sit amet pellentesque quam commodo vel. Donec quis risus felis.
</p>
</div>
.container {
width: 200px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.text {
margin: 0;
}

這里還有一些需要注意的點：

• 國際化支持：省略號ellipsis并非所有語言中都是一樣的，可以使用 🅁（Unicode 碼點）來代替。
• 換行問題：文本中存在換行符時必須設置white-space: nowrap;屬性，否則連續多個空格會換行。
• 字體問題：省略號的長度是不固定的，所以不要使用等寬字體，否則會出現對不齊的問題。