CSS是前端開發中非常重要的一環，它能夠控制頁面的樣式，包括字體、大小、顏色等等。而控制頁面中文字顯示的長度也是CSS常見的用法之一。接下來，讓我們看一下如何使用CSS來控制顯示字數。
首先，我們需要使用CSS中的text-overflow屬性。這個屬性的作用是控制當文字內容超出容器大小時，如何顯示。我們可以使用下面的代碼：

p {
width: 200px;
white-space: nowrap; /*讓文本不換行*/
overflow: hidden;
text-overflow: ellipsis; /*超出部分用省略號替代*/
}

這段代碼里，我們首先指定了p元素的寬度為200像素，然后設置了其white-space屬性為nowrap，這樣就可以保證文本在容器中不自動換行。接下來，我們使用overflow屬性將超出容器的文本切斷，并使用text-overflow屬性將超出部分用省略號替代，看起來更加美觀。
但是，需要注意的是，text-overflow屬性僅作用于以下情況：
- 容器的寬度已經設置；
- 容器的overflow屬性設置為hidden或scroll；
- 容器內文本白色空間已經被設置為nowrap。
如果這三個條件沒有同時滿足，text-overflow屬性將不會生效。
除了使用text-overflow屬性外，我們還可以使用CSS中的clip屬性來控制文本的顯示長度。如下所示：

p {
position: relative;
width: 200px;
height: 1.2em; /*一行的高度*/
overflow: hidden;
}
p::before {
content: "...";
position: absolute;
right: 0;
bottom: 0;
}
p::after {
content: "";
position: absolute;
right: 0;
width: 1em;
height: 1.2em;
background-color: white;
}

在這段代碼中，我們首先將p元素的高度設置為1.2em，相當于只顯示一行文本。然后使用overflow屬性將超出部分隱藏。接下來，我們使用偽元素p::before來插入省略號，p::after來插入一個寬度為1em、高度為一行的白色塊，以便能夠將省略號和文本分隔開來。
總之，CSS中有多種方式可以控制文本的顯示長度，通過text-overflow和clip屬性的運用，我們可以獲取美觀的排版效果。