CSS文字末尾展開收起是一個常見的效果，它可以在頁面中優雅地展示大段的文本內容。但是，如何實現這個效果呢？今天，我們就來一探究竟。

展開效果：
text-overflow：ellipsis;
white-space:nowrap;
overflow:hidden;
收起效果：
text-overflow:ellipsis;
white-space:pre;
overflow:hidden;
max-height: 80px;

展開效果的實現較為簡單，只需要將文本裁剪，并在末尾添加一個省略號即可。而收起效果需要先設置文本溢出隱藏，然后將文本容器的最大高度設置為需要收起的高度值，同時將white-space屬性設置為pre，這樣收起時才能實現換行。最后，通過JavaScript實現“展開”、“收起”按鈕的切換即可。

總結一下，CSS文字末尾展開收起是通過設置文本裁剪、溢出隱藏等CSS屬性，結合JavaScript實現盒子高度的切換來實現的。掌握了這些知識，我們就可以在網頁中優雅地展示大段的文本內容了。