Javascript 生成一个字符串"|&引用；宽度与跨度中另一个字符串的大小相同

我有两个带有拉丁ltr字符串的跨距，我想用一个占位符字符串（如“|”）在rtl中克隆这些字符串

例如：

<span>Lorem impus dolor sit amen</span>

---

使用单空格字体，并按照以下方式进行操作：

new Array( someString.length + 1 ).join('|');

---

下面是我制作的一个小演示：

尝试在具有不可见文本的元素上使用重复的背景图像：

<span style="color: transparent; background-image: url('pipe.png')">Lorem impus dolor sit amen</span>

Lorem impus dolor sit amen

好吧，我只是循环了所有

span

元素，并为每个元素创建了一个新的空

span

，并添加了条带，直到其宽度大于或等于原始

span

的宽度：

该代码适用于任何字体：

主回路：

while(newSpan.width() < elem.width())
    newSpan.append('|');

while（newSpan.width（）

---

代码被注释了，玩得开心

这是行不通的，它甚至更小，“abcdef”的内部宽度与“abcdef”的内部宽度不一样，“abcdef”的内部宽度比“abcdef”的内部宽度大（使用单空格字体）我试过了，结果是，我想让它看起来像这样，有反应的，所有的东西：在这个代码中，你，第一行。右边，“Lorem impus”在左边，“dolor sit amen”在右边，而它应该是相反的，因为我用它来翻译“英语”->“阿拉伯语”，阿拉伯语是RTL语言，不同的字符有不同的宽度。您的代码似乎期望所有字符的宽度相同。使用单间距字体或查看整个渲染字符串的宽度。我已经尝试过了，字符串不是在RTL中排序的，它们只是在右侧对齐

new Array( someString.length + 1 ).join('|');

<span style="color: transparent; background-image: url('pipe.png')">Lorem impus dolor sit amen</span>

while(newSpan.width() < elem.width())
    newSpan.append('|');