在前端開發中，有時候文本內容比較長，而容器的尺寸卻限制了文本的顯示范圍，導致文本溢出容器的情況。這時候，我們可以使用CSS來解決這個問題。

/* 單行文本溢出 */
.overflow-ellipsis {
white-space: nowrap; /* 文本不換行 */
overflow: hidden; /* 隱藏溢出部分 */
text-overflow: ellipsis; /* 文本過長時，以省略號結尾 */
}
/* 多行文本溢出 */
.overflow-wrap{
overflow: hidden; /* 隱藏溢出部分 */
display: -webkit-box; /* 將容器用作彈性伸縮盒子 */
-webkit-box-orient: vertical; /* 垂直方向排列 */
-webkit-line-clamp: 2; /* 行數 */
text-overflow: ellipsis; /* 文本過長時，以省略號結尾 */
}

上面的代碼中，我們為容器添加了兩個類名，分別是.overflow-ellipsis和.overflow-wrap。

單行文本溢出

對于單行文本溢出，我們首先需要讓文本不自動換行，這可以通過white-space: nowrap屬性實現。然后，我們隱藏溢出部分，使用overflow: hidden，最后使用text-overflow: ellipsis屬性，在文本過長時，以省略號結尾。

多行文本溢出

對于多行文本溢出，同樣需要隱藏溢出部分，使用overflow: hidden。然后，我們使用display: -webkit-box將容器用作彈性伸縮盒子，并設置-webkit-box-orient屬性為vertical，讓容器內部的元素垂直方向排列。接著，我們通過-webkit-line-clamp屬性設置行數，最后使用text-overflow: ellipsis屬性，在文本過長時，以省略號結尾。

通過以上兩個方法，我們可以輕松地解決文本溢出的問題。