CSS是前端開發中非常重要的一部分，其中有一項常見的需求是控制頁面中文字的顯示數量。這可以通過CSS的文本溢出屬性實現。當一個DOM元素中的文字太多時，我們可以使用CSS讓它只顯示一部分（比如前50個字符），并在末尾加上省略號。

/* 設置最大寬度，超出部分隱藏 */
.ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 200px; /* 假設最大寬度為200px */
}
/* 控制顯示的文字數量 */
.ellipsis-50 {
display: -webkit-box;
-webkit-line-clamp: 2; /* 這里假設顯示2行文字 */
-webkit-box-orient: vertical;
overflow: hidden;
}

在上面的代碼中，我們使用了三個CSS屬性來實現文本的溢出控制。

overflow: hidden屬性將超出元素寬度的內容隱藏起來。

text-overflow: ellipsis屬性在隱藏的文本末尾加上省略號（...）。

white-space: nowrap屬性取消換行，確保所有文本都在一行內顯示。

除了以上屬性，我們還通過定義一個新的class——ellipsis-50，來控制文字的顯示數量。

display: -webkit-box屬性將元素設置為彈性盒子布局模式。

-webkit-line-clamp屬性指定元素最多顯示多少行文字。

-webkit-box-orient: vertical屬性將元素內部的元素排列方向設置為垂直方向。

overflow: hidden屬性同樣用來控制溢出。

總結來說，通過以上的CSS代碼，我們可以輕松地控制頁面中文字的顯示數量。除此之外，我們還可以通過JavaScript等其他方式來動態地控制文本的溢出和省略，讓頁面更加靈活和美觀。