这是一个创建于 2679 天前的主题，其中的信息可能已经有所发展或是发生改变。
起因是 /t/363313，后来我需要在我的 blog 里面嵌入聊天截图，但是觉得截图的话太浪费，而且不能缩放，于是就打算实现一个微信的聊天界面。
例子：某篇博文的更新。（这个例子展示了如何添加自定义头像，以及使用表情，当书写的时候，表情就是 [表情的名字]。）
比如书写
```iPhone-SE-WeChat6
WeChat chat history with Sometwo
Sometwo
* 13:52
r ( S ) [ Sometwo ] Hi there!
* “ Sometwo ” has recalled a message.
s [ Me ] Hey! What did you recall?
r ( S ) [ Sometwo ] A typo.
```
得到的效果是
当然，一贯的考虑是必须符合 accessibility，所以该有的 aria 东西和高对比度模式的测试都不能少。另外打印的时候显然不希望这样，打印的时候会变成
因为这个比较简单，所以就不贴代码了……主要思路是在 Markdown 编译器处理代码块的时候加入自己的处理程序，以及写好 CSS 即可（注意：为了读屏器按照语义顺序阅读，应该用 ::before 生成头像，用 ::after 生成对话气球的小三角）。
 |
1
crs0910 2017-07-24 22:14:22 +08:00 via iPhone
好玩
|
 |
2
Gauin 2017-07-24 22:30:48 +08:00
不错哦
|
 |
3
mrtctl 2017-07-24 22:39:03 +08:00
例子中 "是用改锥强行撬开后盖。。。" 处似乎有一个换行处理问题，是不是需要 “ word-break: break-all;”？
|
 |
4
geelaw OP @mrtctl 我不控制这个问题，而且 break-all 之后也不会像微信一样换行。另外我也不可能做到像微信那样经过断行规则后自动缩小泡泡的尺寸，这是 CSS 和 HTML 的渲染引擎的问题。
实际上微信的换行算法是有问题的，比如它不认为 é 是一个拉丁字母，导致有的时候单词回从中间断开。 |
|
6
geelaw OP |
 |
7
deepkolos 2017-12-29 13:22:04 +08:00
@geelaw 那个小三角可以通过 clip-path 来绘制, 两个 div, 一个背景边框, 一个内容, 小圆角实现通过多边形来模拟, 效果如下
https://github.com/HZ-WeiBao/app_container/blob/master/modules/littleChat/views/Chat/Window.css#L100 粗暴但是但可用的方式... |
Select Language