iPad端contentEditable元素设置word-spacing时光标定位异常的解决方案求助

最近在做富文本编辑相关的需求，需要给带contenteditable属性的div增加单词间距。用CSS的word-spacing:15px在Windows和Android的Chrome上表现都很顺畅，但到了iPad上就出了头疼的问题——光标经常会跑到单词间距的中间位置，这时候输入字符的话，字符根本不会出现在光标附近，完全不符合用户的操作预期。

我不想用那种手动加多个空格，或者给每个单词都套上span标签的方式来实现间距，这种方法不仅代码冗余，后期维护起来也特别麻烦，想找个更优雅的解决方案。

下面是能复现iPad上这个问题的简化代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div contenteditable="true" style="word-spacing:15px">
        This text has word-spacing.
    </div>
</body>
</html>

可直接运行的代码片段：

<div contenteditable="true" style="word-spacing:15px">
    This text has word-spacing.
</div>

有没有大佬遇到过类似的问题？有没有办法修复iPad上的这个光标定位异常，或者有没有其他不依赖word-spacing属性又能实现单词间距的方法？

内容来源于stack exchange