DOM 和 Canvas 如何实现文字竖向排列的效果

前言

开发 H5 遇到过几次竖排文字的需求，把实现思路梳理一下。

关于竖排文字的一些需求

1. 输入框样式需做成竖排样式；
2. 使用 Canvas 生成图片供用户保存，图片中的文字方向为竖排；
3. 非汉字需与汉字垂直。

项目地址

• 项目链接：go.163.com/web/2019020…
• 或者扫码浏览：

DOM 实现文字竖排

<input> 标签没有竖排的属性，最先尝试修改 <input> 的样式来实现效果，但是效果不理想。最后使用 HTML 的 contenteditable 属性。

尝试修改 input 样式（失败）

想通过限定 输入框的宽度 与 文字的大小 ，让文字自动换行。

关键代码