CSS 文字适配容器宽度，横向拉伸的方法，有吗？

[JCZ2MkKb5S8ZX9pq]

需求

• 容器高度=文字高度(line-height)
• 需要文字宽度超过容器宽度时，文字变窄，适配容器。
• 文字长度未达到容器宽度时，正常显示。

方案

• font-stretch 没有浏览器支持，算了。
• transform scale 应该是可行的。但要知道文字具体宽度有点麻烦。

请问

• 有没有什么更完美的写法？

[newbieRenew]

可以用 svg text 实现。至于优雅，emmm

[yixiang]

canvas 自己画

[66beta]

横向拉伸是把字变胖的意思？

[JCZ2MkKb5S8ZX9pq]

@66beta 变瘦，宽度小于容器不变胖。

[JCZ2MkKb5S8ZX9pq]

@yixiang 我也觉得不行就只能 canvas 了，不过不知道小程序里支持得怎么样。还有一种更傻的方法嘛，我本地把所有文字生成一遍图片，直接调用图片去拉伸。

[66beta]

@JCZ2MkKb5S8ZX9pq 不管变瘦还是变胖都会丑，为什么要这么做呢

[JCZ2MkKb5S8ZX9pq]

@66beta
- 超宽发生概率低，约千分之五。
- 标题超粗体窄个 20%视觉效果还可以接受，类似文悦新青年。