在日常的網頁制作中，我們常常會遇到文字過長的問題。這個問題不僅影響了頁面的美觀度，而且也降低了用戶的閱讀體驗。在這篇文章中，我將會介紹如何使用CSS來解決這個問題。

.wrap {
/* 設置容器寬度 */
width: 300px;
/* 控制文本溢出 */
white-space: nowrap;
/* 超出部分隱藏 */
overflow: hidden;
/* 添加省略號 */
text-overflow: ellipsis;
}

以上代碼中，我們為容器設置了一個固定的寬度，并利用CSS屬性`white-space`來防止文字自動換行。接著，我們利用`overflow`屬性來隱藏文本溢出的部分，并使用`text-overflow`來添加省略號以示未顯示的文本。

如果您想要在沒有限制容器寬度的情況下實現文本截斷的效果，我們可以通過設置`display`屬性為`-webkit-box`（適用于Webkit核心瀏覽器）或`-webkit-flex`（適用于支持Flexbox布局的瀏覽器）。以下是實現文本截斷的代碼示例：

/* Webkit核心瀏覽器 */
.wrap {
/* 設置容器高度 */
height: 45px;
/* 設定布局方式 */
display: -webkit-box;
/* 控制文本溢出 */
-webkit-box-orient: vertical;
/* 超出部分隱藏 */
overflow: hidden;
/* 添加省略號 */
text-overflow: ellipsis;
}
/* 支持Flex布局的瀏覽器 */
.wrap {
/* 設置容器高度 */
height: 45px;
/* 設定布局方式 */
display: -webkit-flex;
display: flex;
/* 控制文本溢出 */
-webkit-line-clamp: 2;
/* 超出部分隱藏 */
overflow: hidden;
/* 添加省略號 */
-webkit-box-orient: vertical;
text-overflow: ellipsis;
}

以上代碼中，我們利用`-webkit-box`和`-webkit-flex`分別設定了文本溢出隱藏的容器樣式。其中，`-webkit-box-orient`和`-webkit-line-clamp`用來控制文本溢出和行數，這樣我們就可以通過設定不同的行數來實現不同的截斷效果。同時，我們還設置了`text-overflow`屬性來添加省略號。

總的來說，通過CSS來控制長文本的溢出部分，是非常方便和實用的。希望這篇文章能夠幫助到您在工作中解決文字過長顯示的問題。