微信小程序是现在很受欢迎的一款应用，其中的CSS样式也是开发者们需要掌握的一个重点。
在微信小程序中，经常会遇到一些文字过长，需要展开全文的情况。这时，我们就需要使用CSS来控制文字的显示。
首先，我们可以使用overflow属性来控制文字的溢出。这里设置overflow为hidden来隐藏溢出的文字：
```
p {
overflow: hidden;
}
```
接下来，我们需要为文字添加一个展开/收起的按钮。我们可以使用checkbox元素来模拟这个按钮：
```
这里是一段较长的文字，需要点击按钮展开全文。这里是一段较长的文字，需要点击按钮展开全文。
``` 这里我们把checkbox放在p标签外包裹了一层label标签，并设置for属性为checkbox的id，这样点击此标签就能控制checkbox的状态了。 接下来，我们需要设置展开全文的样式。根据我们刚刚设置的overflow属性，我们可以通过修改max-height属性来控制文字的显示。当展开状态时，我们把max-height设置成none即可: ``` p { overflow: hidden; max-height: 60px; } #read-more:checked ~ p { max-height: none; } ``` 为了让我们的样式更加美观，我们可以为展开/收起的按钮添加一些样式。比如样式中添加一个圆角渐变的背景： ``` .read-more-label { background: linear-gradient(to bottom, #ffffff, #e6e6e6); border-radius: 4px; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); cursor: pointer; display: inline-block; font-size: 12px; font-weight: 700; line-height: 1; margin: 0; padding: 10px 16px; text-align: center; text-decoration: none; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); transition: background-color 0.3s ease; } .read-more-label:hover { background-color: #dcdcdc; } ``` 这部分代码可以放在pre标签中，整个代码如下： ```这里是一段较长的文字，需要点击按钮展开全文。这里是一段较长的文字，需要点击按钮展开全文。
```