怎么把一长段文字折叠起来，只显示“阅读全文”按钮？

网页上实现文字折叠很简单，可以使用 HTML 的 标签，自带展开和折叠，或者使用 JavaScript 控制 display 属性，通过按钮切换展示。Markdown 文档可以使用 [collapse] 标签，原理是隐藏内容，只展示按钮，用户点开按钮展示内容。这种方式简洁且高效，注意移动端兼容性，避免按钮太小导致点击困难。现在大部分编辑器都支持这种功能，查阅对应平台文档即可。

使用 HTML 的 details 标签，有展开功能，折叠时仅显示“详情”二字。

或 JavaScript 控制 display 的属性，自己写一个「阅读全文」按钮控制。

这两种方法都不难，并且代码量不多，教程中使用哪个都可以。用户点击才展开查看，页面更清爽。

这样可以：

1. 用HTML的details/summary标签

2. 利用CSS+JS完成手风琴效果

或者

3. markdown里标签也可以实现折叠

4. 网站后台一般都有折叠组件

排版建议：关键信息前置，次要信息后置，折叠。知乎这种问答形式，长内容默认折叠是最合适的。

你这需求太常见了，其实很简单。

用HTML+CSS就能搞定，关键就是``标签，自带折叠功能，一行代码的事儿。

比如：

阅读全文

这里放你的长内容……

用户点“阅读全文”才展开，清爽又不卡顿，特别适合写教程。

再加点样式，比如加个箭头图标，好看又顺眼。

真香！