在網頁設計中，經常需要控制文字的顯示長度。為了美化頁面布局，我們希望在一定的區域內顯示完整的文字，避免過長或過短的顯示效果。當文字長度超出規定寬度時，我們可以使用CSS控制字數自動截取。

/*單行文本超出長度省略*/
.one-line {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/*多行文本超出長度省略*/
.multi-line {
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 2;  /*控制行數*/
-webkit-box-orient: vertical;
text-overflow: ellipsis;
}
/*鼠標懸停時完整顯示省略文本*/
.hover-ellipsis {
display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; 
}
.hover-ellipsis:hover {
white-space: normal;
}

以上代碼分別實現了單行文本、多行文本、鼠標懸停時完整顯示省略文本的效果。其中，單行文本只需要設置三個屬性：overflow、text-overflow和white-space。而多行文本則需要加上-webkit-box類似的屬性，控制文字在多行中顯示的效果。

使用CSS控制字數自動截取能夠使網頁布局更加美觀，同時也提高了用戶閱讀體驗。在實際開發時，需要根據頁面需求選擇不同的自動截取方式，優化文字顯示效果。