优化Memos项目中的内容展示方式：去除"显示更多"按钮

在Memos项目0.24.1版本更新后，用户界面进行了优化，但部分用户反馈长内容被自动截断并显示"显示更多"按钮的设计影响了浏览体验。本文将介绍如何通过CSS自定义来解决这一问题。

问题背景

Memos作为一款轻量级的笔记应用，在0.24.1版本中引入了内容截断功能，当内容超过一定长度时会显示"显示更多"按钮。这一设计虽然美观，但对于经常发布长内容的用户来说，每次都需要点击按钮才能查看完整内容，降低了浏览效率。

技术解决方案

通过分析Memos的前端实现，发现内容截断是通过Tailwind CSS的line-clamp-6类实现的，该功能会将内容限制为最多6行，并在底部添加渐变遮罩和"显示更多"按钮。

核心CSS代码

.group > .justify-start .line-clamp-6 {
  max-height: 72rem;
  -webkit-line-clamp: 36
}
.group > .justify-start .line-clamp-6 .bg-gradient-to-b {
  background: none
}
.group > .justify-start .line-clamp-6 + .mt-1 {
  display: none
}

这段代码实现了三个关键修改：

1. 将最大高度扩展到72rem，-webkit-line-clamp增加到36行
2. 移除底部渐变遮罩效果
3. 隐藏"显示更多"按钮

扩展优化方案

除了解决核心问题外，还可以通过CSS进一步优化Memos的界面：

1. 调整背景色：增强卡片显示效果

html:not(.dark) > body {
  background-color: rgb(244, 244, 244)
}

2. 优化段落间距：改善内容可读性

.group p:not([hidden]) + p:not([hidden]) {
  margin-top: 0.75rem
}

3. 美化标签样式：增强标签视觉效果

span.inline-block.text-blue-600 {
  display: inline-flex;
  padding: 0 8px;
  border-radius: .375rem;
  background: #0d9488b3;
  color: #f3f4f6;
  font-size: 0.8em;
}

实现效果

应用这些CSS修改后，Memos将：

• 直接显示完整内容，无需点击"显示更多"
• 界面层次更加分明
• 阅读体验更加流畅
• 标签更加醒目易识别

注意事项

1. 这些修改属于前端覆盖，如果Memos更新了HTML结构可能需要相应调整CSS
2. 对于特别长的内容，建议考虑分页或分段处理，而不是完全取消截断
3. 修改前建议备份原始CSS，以便需要时恢复

通过这种自定义CSS的方式，用户可以根据自己的使用习惯和需求，灵活调整Memos的界面表现，获得更加个性化的使用体验。