离子中的阿拉伯文本 - 更改一个字母的颜色会更改格式

Question

当我在.html-data中改变Ionic中一个字母的颜色时，我的单词比平常更长（看图片）。正常输出是输出2。

输出1：如果我这样做，这个词会变长。当我添加该行来加入字母时会发生这种情况：

<button>
    <span style="font-size: 30px">مَـ<span style="color:red">ـرَ</span>جَ</span> 
</button>

输出3：当我不添加连接线时会发生这种情况。他们没有加入，但他们必须加入：

<button>
    <span style="font-size: 30px">مَ<span style="color:red">رَ</span>جَ</span>
</button>

当我更改一个字母的颜色时，我该怎么做才能保持单词的正常长度？

谢谢大家的帮助！