利用零宽字符制作PushMe HTML消息摘要

在使用 PushMe 推送 HTML 消息时，由于 PushMe 默认生成的消息摘要是自动提取的，在很多时候这个摘要并没有起到什么作用，特别是有表格等复杂数据时，如下图。

![2025-09-06_094116.png](https://storage.liesauer.net/2025/09/2836068499.png)

然后想着试下利用摘要不解析 HTML 的这个特性，使用一段`display:none`的文字作为消息摘要，在点进去正文时，解析 HTML 后也会看不见这段摘要。

刚开始尝试使用超多的` `将正文部分推到很后的地方，摘要为摘要，正文为正文，但是自动提取出来的摘要会将连续空格转为单个，还是会导致正文出现在摘要里。

示例消息
```html
<div style="display:none">这是简介     </div><div style="border: 10px solid #46bc99; text-align: center; font-size: 30px;">HTML</div>
```

然后又想到了零宽字符，看下会不会将零宽字符也转成单个空格，由于我博客不好插入能显示且能复制的零宽字符，所以就只能将方法放出来，自己操作一遍了，利用这个工具生成零宽字符:point_right: [零宽字符生成工具](https://yuanfux.github.io/zero-width-web/ "零宽字符生成工具")。

![810ada0c-e874-4a34-88b2-4c2a60c08859.png](https://storage.liesauer.net/2025/09/328756070.png)

当你正确生成且复制，内容应该是这样的，我们保留零宽字符部分即可
![PixPin_2025-09-06_10-04-33.png](https://storage.liesauer.net/2025/09/857080392.png)

为了填充足够的摘要，不让正文显示出来，我们需要把整段零宽字符复制 15-20 遍，然后最终成品长这样
![PixPin_2025-09-06_10-11-40.png](https://storage.liesauer.net/2025/09/335402725.png)

最终在 PushMe 的展示效果如下，就非常的 nice。
![2025-09-06_101310.png](https://storage.liesauer.net/2025/09/839058513.png)

![2025-09-06_101333.png](https://storage.liesauer.net/2025/09/3474265316.png)