在 Web 開發中，有時候我們需要在網頁上顯示大量的文本內容，但是又不想全部顯示出來，這時就可以使用文本截斷效果。常見的文本截斷效果有兩種，一種是超出文字隱藏，即當文本內容超出一個指定的寬度或高度時，多余部分隱藏掉，并用省略號代替；另一種是溢出換行，即當文本內容超出指定寬度或高度時，強制將其換行顯示。

/* 超出文字隱藏 */
.text-overflow {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
/* 這里添加其他樣式 */
}
/* 溢出換行 */
.text-wrap {
overflow-wrap: break-word;
word-wrap: break-word;
word-break: break-all;
/* 這里添加其他樣式 */
}

上面的代碼演示了如何通過 CSS 來實現超出文字隱藏和溢出換行效果。

值得注意的是，這種文本截斷效果是只針對塊級元素的，如果你想在行級元素中實現這種效果，你需要用到一些奇技淫巧，例如 text-indent 屬性或者使用偽元素來添加省略號等。