首先，大家需要使用一个包含文本的HTML元素，比如一个段落
<p> </p>。然后，在CSS文件中定义该元素的样式，如字体大小、颜色等属性。接下来，为了达到收起展开的效果，大家需要使用CSS3的一些新特性，如height、overflow和transition等属性。
先来看height属性，它可以控制元素的高度。大家可以定义一个默认高度和一个较小的高度，当需要收起元素时，修改元素的高度为较小值，当需要展开元素时，修改元素的高度为默认值。
// 定义默认高度和过渡效果
p {
height: auto; /* 默认高度 */
overflow: hidden; /* 内容超出高度时隐藏 */
transition: height 0.5s ease-in-out; /* 过渡动画效果 */
}
// 定义收起状态下的高度
p.collapsed {
height: 50px; /* 较小高度 */
}上面的代码中，height属性的值可以是具体数值，也可以是auto（自适应高度）。overflow:hidden属性可以让元素的内容超出高度时自动隐藏。transition属性定义一个过渡动画效果，让元素的高度变化更加平滑自然。当添加collapsed类名时，元素将变为收起状态，高度为50px。
大家还需要添加一个控制开关，让用户可以主动控制元素的状态。可以使用JavaScript来实现，也可以使用纯CSS来实现，添加一个容器元素和一个复选框，用伪类实现状态切换：
// 定义容器元素和复选框
<div class="switch">
<p>文本内容...</p>
<input type="checkbox" id="switcher">
<label for="switcher">收起/展开</label>
</div>
// 定义伪类
/* 复选框未选中（默认状态） */
.switch>:not(:checked) + label + p {
height: auto; /* 自适应高度 */
}
/* 复选框选中（收起状态） */
.switch>:checked + label + p {
height: 50px; /* 固定高度 */
}代码中使用了:not和:checked伪类，它们分别表示元素未被选中和已被选中。在未被选中时，文本元素的高度自适应；在被选中时，文本元素的高度固定为50px，达到收起状态。
以上就是实现文本内容收起展开效果的方法，通过使用CSS3的height、overflow和transition等属性，以及容器元素和伪类控制方式，可以对网页中的内容进行优化和美化。