CSS中可以通過設置text-overflow: ellipsis屬性，使得文字超出容器寬度時縮回并在結尾顯示“...”。這種效果默認是在元素的右側顯示省略號，但是如果我們想要將省略號顯示在某個具體的位置，該怎么辦呢？這時就需要運用CSS技巧，將文本縮回到容器的左側，同時使省略號顯示在其右側。

li {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
max-width: 200px;
}
li::after {
content: "...";
display: inline-block;
width: 10px;
margin-left: 5px;
}

如上代碼所示，我們首先將li元素設為display: inline-block;，再設置文本不換行white-space: nowrap;，并隱藏溢出部分overflow: hidden;，開啟文本溢出顯示省略號text-overflow: ellipsis;，最大顯示寬度為200pxmax-width: 200px;。

然后通過偽元素::after添加省略號content: "...";，并將其設為display: inline-block;，使其與文本在同一行內顯示。再設置其寬度width: 10px;，留出空白。最后設置其左邊距margin-left: 5px;，使其與文本之間有一定距離，從而達到效果。

這樣我們就成功實現了將文本縮回到容器左側，同時在其右側顯示省略號的效果。