CSS中可以使用text-overflow屬性實現自動截取字符串的效果。當文本過長超出了容器的寬度時，可以使用text-overflow將超出部分省略顯示，并在末尾添加省略號，以達到優化頁面布局的效果。
下面是一個例子：
.container {
width: 100px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}在上面的代碼中，我們首先定義了一個容器的寬度為100px，然后使用了white-space: nowrap屬性來防止文本換行，這樣當文本超出容器寬度時，只會在水平方向上滾動而不會換行。接著使用了overflow:hidden屬性將超出范圍的文本隱藏起來，最后使用text-overflow:ellipsis屬性將超出部分省略顯示，并在末尾添加省略號。
需要注意的是，text-overflow屬性只有在同時滿足以下三個條件時才會生效：
- 容器的寬度必須有限制
- 容器中的文本必須不能換行
- 容器中的文本必須溢出
如果沒有滿足上述條件之一，text-overflow屬性將不會生效，省略號也不會顯示。
總結一下，通過使用text-overflow屬性，我們可以在優化頁面布局的同時，實現字符串的自動截取，并在末尾添加省略號。同時，我們需要注意text-overflow屬性生效的三個條件，以保證該特性正常使用。